AMir Sirati AMir Sirati - 7 months ago 31
HTML Question

how i can draw image and rotate with shadow in html 5 canvas

i write a canvas rotate image and trying to add drop shadows.
anyone can help me to how i can add a different shadow style for images inside canvas. i need drop shadows like as this image for result :
enter image description here

context.shadowColor = "rgba( 0, 0, 0, 0.3 )";
context.shadowOffsetX = 6;
context.shadowOffsetY = 6;
context.shadowBlur = 3;
context.drawImage( brolly, 25, 250 );


full code :



window.addEventListener("load", init);

var canvas = document.getElementById('c');
canvas.width = 360;
canvas.height = 360;
var context = canvas.getContext('2d');
var counter = 0;

var logoImageh = new Image();
logoImageh.src = 'http://sirati.info/tmp/h.png';

var logoImagem = new Image();
logoImagem.src = 'http://sirati.info/tmp/m.png';

TO_RADIANS = Math.PI / 180;


function init() {
setInterval(loop, 100 / 30);

}

function loop() {


context.clearRect(0, 0, canvas.width, canvas.height);
drawRotatedImage(logoImageh, 180, 180, counter++);
drawRotatedImage(logoImagem, 180, 180, counter++);

counter += 1;

}


function drawRotatedImage(image, x, y, angle) {

context.save();
context.translate(x, y);
context.rotate(angle * TO_RADIANS);
context.drawImage(image, -(image.width / 2), -(image.height / 2));
context.restore();
}

body {
margin: 0px;
padding: 0px;
text-align: center;
}
canvas {
outline: 0;
border: 1px solid #000;
margin-left: auto;
margin-right: auto;
}

<html>

<head>

<title>Simple</title>

</head>

<body>
<canvas id='c'></canvas>
</body>

</html>





i write

Answer

Add shadows to your images using in-memory canvases.

Then drawImage those in-memory canvases instead of the images. Yes, drawImage can draw other canvases as well as images!

enter image description here

[Addition: example code using question's code as a basis]

var canvas = document.getElementById('c');
canvas.width = 360;
canvas.height = 360;
var context = canvas.getContext('2d');
var counter = 0;
TO_RADIANS = Math.PI / 180;

var nextTime=0;
var delay=1000/60*2;

var logoImageh = new Image();
logoImageh.onload=start;
logoImageh.src = 'http://sirati.info/tmp/h.png';
var logoImagem = new Image();
logoImagem.onload=start;
logoImagem.src = 'http://sirati.info/tmp/m.png';
var imageCount=2;
//
function start(){
    canvasLogoImageh=addShadowToImage(logoImageh);
    canvasLogoImagem=addShadowToImage(logoImagem);
    requestAnimationFrame(loop);
}

function addShadowToImage(img){
    var c=document.createElement('canvas');
    var cctx=c.getContext('2d');
    c.width=img.width;
    c.height=img.height;
    cctx.shadowColor='black';
    cctx.shadowBlur=10;
    cctx.drawImage(img,0,0);
    return(c);
}

function loop(time) {
  if(time<nextTime){requestAnimationFrame(loop);return;}
  nextTime=time+delay;
  context.clearRect(0, 0, canvas.width, canvas.height);
  drawRotatedImage(canvasLogoImageh, 180, 180, counter++);
  drawRotatedImage(canvasLogoImagem, 180, 180, counter++);
  counter += 0.25;
  requestAnimationFrame(loop);
}

function drawRotatedImage(image, x, y, angle) {
  context.save();
  context.translate(x, y);
  context.rotate(angle * TO_RADIANS);
  context.drawImage(image, -(image.width / 2), -(image.height / 2));
  context.restore();
}
body{ background-color: ivory; }
canvas{border:1px solid red; margin:0 auto; }
<canvas id="c" width=300 height=300></canvas>