0

I am using the below code to set the height and width property of a canvas element. The sizes do not seem to be returned in pixel.

(function(){
    var width = $(window).width(),
        height = $(window).height();
    canvas.width = width;
    canvas.height = height;
})()

Is there a way to change I can check the unit of this value or get the pixel equivalent without converting in my script?

https://jsfiddle.net/gt38asfm/2/

Pawan
  • 63
  • 6
  • What do you get instead of the expected value? – cFreed Dec 17 '16 at 21:07
  • I am not sure. Is there a way to know? – Pawan Dec 17 '16 at 21:08
  • `console.log($(window).width());` – cFreed Dec 17 '16 at 21:10
  • I tried that already. Both .log and .dir for the width show the value, not the unit – Pawan Dec 17 '16 at 21:13
  • So isn'it what you wanted? – cFreed Dec 17 '16 at 21:30
  • No.. I added a fiddle to show the issue. If you try to resize the window you can see the value gets updated but the actual dimensions of the canvas are never changing to 100% window width. I thought if i could get the unit could atleast figure out what is going on – Pawan Dec 17 '16 at 21:35
  • Unit is not important, and it is pixel, btw. You want actually 100% window width/height, on resize, too? http://stackoverflow.com/questions/1664785/resize-html5-canvas-to-fit-window – sinisake Dec 17 '16 at 21:38
  • Thanks. I just wanted to know if the returned unit is pixel as there seems to be no other way to know that explicitly. But then I realized there was actually a bug in my code. I had to change the fixed value of x and y to from 500 to the window size to pick from. It resizes to the correct scale so my canvas works as I wanted it to although I still don't know how to get the unit of what JQuery is giving me (say I auto-generate another script using the units from this code, in that case I want the value and units as it is returned in the first place). – Pawan Dec 17 '16 at 22:30

2 Answers2

2

Canvas tag itself don't need units.

Second thing; u have no "resize" event triggered so canvas size won't change.

Also, you have limited the size of active area in this line: 

var x = Math.round(Math.random()*500), y = Math.round(Math.random()*500)

If you want to draw elements using full canvas area, you should do something like that:

var x = Math.round(Math.random()*width), y = Math.round(Math.random()*height)

Variables Width and height can't be inside any function or you will have error(width is undefined).

Cheers

0

$(window).resize() is ok for you ? https://jsfiddle.net/matake/gt38asfm/5/

$( window ).resize(function() {
    var width = $(window).width(),
    height = $(window).height();
    canvas.width = width;
    canvas.height = height;
    sizeSet = true;
});
MTK
  • 3,300
  • 2
  • 33
  • 49
  • using the CSS property distorts the canvas for some reason. Its height and width need to be set in the element itself. I added a fiddle to show the issue. – Pawan Dec 17 '16 at 21:31
  • Thanks for your help. But if you look closely this is streching the canvas and not resizing it. I realized there was actually a bug in my code. I had to change the fixed value of x and y to from 500 to the window size to pick from. Got the solution now – Pawan Dec 17 '16 at 22:17