0

I am Trying to make a game with canvas elements in javascript. I have everything working except the "play" section. I am trying to make the image rotate to a degree and render on the frame. My problem is that whenever I play, the image renders for about 2-3 seconds and vanishes. The function for rendering the image:

function shipImages(num,rotation){
  var im = shipImage(num);
  //create hidden canvas...
  var hc = document.createElement("canvas");
  hc.width = 256;
  hc.height = 256;
  hc.style = "display:none";
  document.body.appendChild(hc);
  var hcc = hc.getContext("2d");
  //now to draw it rotated
  var x = hc.width / 2;
  var y = hc.height / 2;
  var angleInRadians = rotation * (Math.PI / 180);

  hcc.translate(x, y);
  hcc.rotate(angleInRadians);
  hcc.drawImage(im, -hc.width / 2, -hc.height / 2, im.width, im.height);
  hcc.rotate(-angleInRadians);
  hcc.translate(-x, -y);
  var b64 = hc.toDataURL();
  document.getElementById(""+num).src = b64;
  hc.remove();
  return document.getElementById(""+num)
}

And the shipImage function:

function shipImage(num){
  var coolIm = document.getElementById(""+num);
  if(coolIm == null){
    var im = document.createElement("img");
    im.id = ""+num;
    im.style = "display:none;";
    im.src = skin[num];
    document.body.appendChild(im);
  }
  coolIm.src = skin[num];

  return document.getElementById(""+num);
}

Here is the full code: https://jsfiddle.net/2thx78z0/27/

charlie grow
  • 9
  • 2
  • I can't say that I see what you're talking about. I see no rotation in Firefox, but `hc.style = "display:none";`, would have to be `hc.style.display = 'none';`. I do see Sputnik or the Skin of choice. – StackSlave Dec 05 '17 at 03:10
  • I was coding it in google, so you should be able to see it there. If people want, I can post screenshots of what I'm seeing – charlie grow Dec 05 '17 at 03:11
  • @PHPglue I gave you the wrong url. The one I gave you was the unedited version, without rotation. I have edited my statement to include the current link – charlie grow Dec 05 '17 at 03:19
  • You need to wait for your image has loaded before being able to do anything with it. You are currently drawing the previous version of the image. [Here is a fast-fixed snippet.](https://jsfiddle.net/2thx78z0/29/) – Kaiido Dec 05 '17 at 03:33

0 Answers0