CODEWITHSUNDEEP
htmlcanvasresize
Composer
Composer

Reputation: 255

HTML5 Canvas resize and context coordinates

I'm attempting to draw an image into my canvas. I've defined my canvas in html and resize it using JS.

var can = document.getElementById('myCanvas');
can.style.width = (window.innerWidth-20) + "px";
can.style.height = "860px";
var context=can.getContext("2d");
var img=document.getElementById("boje");
context.drawImage(img,50,0,400,140);

Somehow coordinates for the position and size properties are not true to the resized canvas when i use drawImage function(size of the image is bigger for example). If for example i define dimensions of the canvas in html before JS resize the coordinates are true to the html definition.

Is it possible to "reset" the 2d context to use real coordinates of the resized canvas?

Thank you.

Upvotes: 2

Views: 2081

Answers (1)

robertc
robertc

Reputation: 75707

You haven't resized it using JS, you've resized it using CSS (style). This just scales it like any other image. Set the width and height properties directly:

can.width = (window.innerWidth-20);
can.height = 860;

Upvotes: 2

Related Questions