Search code examples
javascripthtmlcanvasshadow

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

Solution

  • 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>