compared pixel of canvas and window

Question

i am currently have a problem. I want to draw image by using canvas and image object in html5 and javascript I want to know what is the equal size of canvas pixel to window pixel eg: for example I have cavas (700 * 400) then i want to know how much size it need on window screen. Therefore, if i want to know (1*1) what is it equal to window.screen.widht * window.screen.height

1 pixel on the canvas is = to window's pixel, unless you set width and height on the css. to scale images, just get the ratio between the canvas and the window, and multiply all the images you want to scale by that. — kennypu
O i may wrong then : for example I have cavas (700 * 400) then i want to know how much size it need on window screen. Therefore, if i want to know (1*1) what is it equal to window.screen.widht * window.screen.height — Pon Somean

Bali Balo Bali Balo · Accepted Answer · 2012-12-13T06:35:14

Divide the actual size of the element by the one you defined in the properties. Exemple: http://jsfiddle.net/pjdmN/

var canvas = document.getElementById('canvas');
var xRatio = canvas.offsetWidth / canvas.width;
var yRatio = canvas.offsetHeight / canvas.height;

compared pixel of canvas and window

2 Answers