Inset-Shadow on HTML5 Canvas Image

Inset-shadow on HTML5 canvas image

Canvas will shadow where an image changes from opaque to transparent so, as K3N shows in his correct answer, you can turn the image inside out (opaque becomes transparent & visa-versa) so the shadows are drawn inside the circle.

If you know your circle's centerpoint and radius, you can use a stroked-path to create an inset circle shadow. Here's an example:

var canvas=document.getElementById("canvas");var context=canvas.getContext("2d");var cw=canvas.width;var ch=canvas.height;
context.beginPath();context.arc(cw/2,ch/2,75,0,Math.PI*2);context.fillStyle='lightcyan';context.fill();
context.globalCompositeOperation='source-atop';
context.shadowOffsetX = 500;context.shadowOffsetY = 0;context.shadowBlur = 15;context.shadowColor = 'rgba(30,30,30,1)';
context.beginPath();context.arc(cw/2-500,ch/2,75,0,Math.PI*2);context.stroke();context.stroke();context.stroke();
context.globalCompositeOperation='source-over';

<canvas id="canvas" width=300 height=300></canvas>

Outer shadow on a rounded image in canvas?

Use the shadow methods built into canvas

let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
canvas.width = 500;
canvas.height = 500;
let image1 = new Image();
image1.src = "https://images.unsplash.com/photo-1556103255-4443dbae8e5a?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8cGhvdG9ncmFwaGVyfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&w=1000&q=80";

context.beginPath();
context.shadowColor = "black";
context.shadowOffsetX = 5;
context.shadowBlur = 8;
context.arc(50, 50, 25, 0, Math.PI * 2, true);
context.fill();
context.closePath();
context.clip();
context.drawImage(image1, 25, 25, 50, 50);

<canvas id="canvas"></canvas>

HTML Canvas & Javascript - Shadow Around Image Rather Than Border

Simply remove the shadowOffset before drawing your image.
When you set this property, all subsequent drawings will have a shadow.

var c=document.getElementById('game'),  canvasX=c.offsetLeft,  canvasY=c.offsetTop,  ctx=c.getContext('2d')  elements = [];    var x=25, y=25, w=150, h=150;
var img=new Image(); img.src='https://i.stack.imgur.com/ddSWa.jpg';ctx.beginPath();ctx.lineWidth='8';ctx.strokeStyle='white';ctx.moveTo(x+10, y);ctx.lineTo(x+w-10, y);ctx.quadraticCurveTo(x+w, y, x+w, y+10);ctx.lineTo(x+w, y+h-10);ctx.quadraticCurveTo(x+w, y+h, x+w-10, y+h);ctx.lineTo(x+10, y+h);ctx.quadraticCurveTo(x, y+h, x, y+h-10);ctx.lineTo(x, y+10);ctx.quadraticCurveTo(x, y, x+10, y);ctx.shadowColor = '#000000';ctx.shadowBlur = 20;ctx.shadowOffsetX = 5;ctx.shadowOffsetY = 5;ctx.stroke();// now reset the shadowctx.shadowBlur = 0;ctx.shadowOffsetX = 0;ctx.shadowOffsetY = 0;
ctx.drawImage(img, x+2.5, y+2.5, w-5, h-5);

canvas {  display: block;  margin: 1em auto;  border: 1px solid black;  background: #FF9900;}

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>uTalk Demo</title> <link rel='stylesheet' type='text/css' href='game.css' media='screen'></style></head><body> <canvas id="game" width = "200" height = "200"></canvas></body></html>

How to have a circular inner shadow for canvas shape?

Try drawing the arc that is to supply the shadow before the arc that supplies the frame. Save the context state before the beginPath and restore it after the stoke of the shadow arc. You will need to make the shadow arc radius smaller than the frame arc so that the outer edge of the shadow is covered by the stroke of the frameing arc. The outside shadow that is outside of the shadow arc is still drawn, but covered over by the framing arc.

Example:

context.save();
context.beginPath();
context.lineWidth = 6;
context.shadowColor = 'black';
context.strokeStyle = "rgba(0,0,0,1)";
context.shadowBlur = 15;
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.arc(x, y, 47, 0, 2 * Math.PI, false);
context.stroke();
context.restore();

context.save();
context.beginPath();
context.lineWidth = 6;
context.arc(x, y, 50, 0, 2 * Math.PI);
context.stroke();
context.restore();

You will need to adjust the size, color, and line width of the arcs to get the effect you want.

Using canvas, how to cut holes with inset shadows into an image?

I suggest you use a second canvas to help create the effect you're after, alongside shadowOffset and shadowColor.

let cvs = document.querySelector("canvas");
let ctx = cvs.getContext("2d");
let img = new Image();

img.addEventListener("load", function() {
  let cvs2 = document.createElement('canvas');
  cvs2.width = 256;
  cvs2.height = 256;
  ctx2 = cvs2.getContext("2d");

  hole(ctx2, 64, 64, 32);
  hole(ctx2, 192, 64, 32);
  hole(ctx2, 64, 192, 32);
  hole(ctx2, 192, 192, 32);

  ctx2.globalCompositeOperation = "source-out";
  ctx2.drawImage(img, 0, 0, 256, 256);

  ctx.shadowOffsetX = 4;
  ctx.shadowOffsetY = 4;
  ctx.shadowBlur = 8;
  ctx.shadowColor = 'black';
  ctx.drawImage(cvs2, 0, 0, 256, 256);
});
img.src = "https://placeimg.com/256/256/nature";

function hole(ctx, x, y, r, ccw = false) {
  ctx.beginPath();
  ctx.arc(x, y, r, 0, Math.PI * 2, ccw);
  ctx.closePath();
  ctx.fill();
}

<canvas width="256" height="256"></canvas>

HTML Canvas: inner shadow for circle shapes (planets)

Try to call clip method (and related codes) before drawing "shadow" onto planet like this.

const ctx = canvas.getContext("2d");
//draw planetctx.beginPath();ctx.arc(100, 100, 80, 0, Math.PI*2);ctx.fillStyle = "aqua";ctx.fill();//save non-clipped state.ctx.save();//clip range by planet area.ctx.clip();//draw shadowctx.beginPath();ctx.arc(200, 200, 200, 0, Math.PI*2);ctx.lineWidth = 100;ctx.stroke();//dispose clip range.ctx.restore();

<canvas id="canvas" width="200" height="200"></canvas>

Add shadow to Canvas element (keeping the element transparent)

An easy trick is to shift the context so the stroke is off-screen, and to shift the shadow back to the right position.

Simple !

var context = canvas.getContext("2d");
var x= 60, y=60, r=40;
var trickShift = { x:10000, y:1000} ;
context.save();context.beginPath();context.translate(-trickShift.x, -trickShift.y);context.lineWidth = 5;context.shadowColor = 'black';context.strokeStyle = '#000'; "transparent";context.shadowBlur = 15;context.shadowOffsetX = trickShift.x + 100;context.shadowOffsetY = trickShift.y + 100;context.arc(x-100, y-100, r, 0, 2 * Math.PI, false);context.stroke();context.restore();

<canvas id="canvas"></canvas>

How to persist shadow of an inner div while drawing as image using canvas?

Here is how I have achieved it.

let croppedCanvas = document.createElement("canvas");
let croppedCanvasContext = croppedCanvas.getContext("2d"); // init data

let cropPositionTop = CANVAS.OFFSET_POSITION;
let cropPositionLeft = CANVAS.OFFSET_POSITION;
let cropWidth = canvas.width;
let cropHeight = canvas.height;
croppedCanvas.width = cropWidth + CANVAS.PADDING; //for getting space around main image
croppedCanvas.height = cropHeight + CANVAS.PADDING; //for getting space around main image
var grd = croppedCanvasContext.createLinearGradient(
  CANVAS.START_X,
  CANVAS.START_Y,
  croppedCanvas.width,
  croppedCanvas.height
);
grd.addColorStop(colorStop.stop, colorStop.color);
croppedCanvasContext.fillStyle = grd;
croppedCanvasContext.fillRect(
  CANVAS.START_X,
  CANVAS.START_Y,
  croppedCanvas.width,
  croppedCanvas.height
);
croppedCanvasContext.shadowOffsetX = CANVAS.START_X;
croppedCanvasContext.shadowOffsetY = CANVAS.START_Y;
croppedCanvasContext.shadowBlur = CANVAS.SHADOW_BLUR;
croppedCanvasContext.shadowColor = CANVAS.SHADOW_COLOR;
croppedCanvasContext.drawImage(canvas, cropPositionLeft, cropPositionTop);

Inset-Shadow on HTML5 Canvas Image