CODEWITHSUNDEEP
javascriptjqueryhtmlcss
andrsnn
andrsnn

Reputation: 1621

Canvas element, draw circle resize

I am SLOWLY trying to create the breakout game to get more familiar with javascript.
I am trying to re size the canvas element according to the window size, but notice the circle I am rendering re sizes automatically according to the size of the canvas. How would i render the size of the circle independently from the size of the canvas? 

//resize canvas
$(function(){
$("#canvas").width($(window).width());
});

//get a reference to the canvas
var ctx = $('#canvas')[0].getContext("2d");

//draw a circle
ctx.beginPath();
ctx.arc(75, 75, 10, 0, Math.PI*2, true); 
ctx.closePath();
ctx.fill();

here is my fiddle: http://jsfiddle.net/z25q7/3/

Thank you!

Upvotes: 1

Views: 979

Answers (1)

bfavaretto
bfavaretto

Reputation: 71908

Change the canvas' width property directly, not its CSS style.width (which is what jQuery does):

$("#canvas")[0].width = $(window).width();

More information here: Size of HTML5 Canvas via CSS versus element attributes

Upvotes: 1

Related Questions