1

I am drawing a cirlce on canvas who's center points are the middle points of the canvas so the circle should start from the center of the page and its radius should be from 1/2 of the screen to 3/4th. I have figured out the way to make the canvas resize itself according to the window size, but i cant get the cirlce to resize automatically. also that i cant figure out the radius to make it look like a cirlce with my specifications, currently it looks like an stretched circle. What value should i give to my radius to make it look like a normal circle again. also it should be able to resize it self on window resize? currently i have the following values: 

var canvas = document.getElementById('canvas');
if (canvas.getContext){
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var myRadius = canvas.width / 4; 
context.arc(centerX, centerY, myRadius, 0, (Math.PI/180) * 360 , false);
context.fillStyle = 'green';
context.fill()
}
Madara's Ghost
  • 172,118
  • 50
  • 264
  • 308
Ahsan Abbas
  • 73
  • 1
  • 8
  • The code you show will draw an unstretched circle so I'm guessing that you're using CSS to resize your canvas. Most often, you should resize the html5 canvas element itself rather than resizing using CSS. Resizing the canvas using CSS usually leads to the existing content being distorted. That's because the browser will "stretch & squish" the existing pixels to fit in the CSS resized canvas. (see: http://stackoverflow.com/questions/28049973/sizing-and-scaling-canvas-element/28051119#28051119). – markE Jan 25 '15 at 16:05
  • Thank you so much, i'll look into doing that. :) – Ahsan Abbas Feb 01 '15 at 13:03

2 Answers2

0

You should handle resize events and redraw the circle for the new canvas dimensions.

Raj
  • 3,051
  • 6
  • 39
  • 57
0

If you will resize your canvas using styles circle will redraws as you expect: fiddle (actually whole canvas will act as just an image: try to change dimensions of canvas from 1000 to 100 and you'll see what I mean)

css:

#canvas {
    height: 100%; 
    width: 100%
}

html:

<canvas id="canvas" height="1000" width="1000"></canvas>
Roman Bekkiev
  • 3,010
  • 1
  • 24
  • 31
  • Most often, you should resize the html5 canvas element itself rather than resizing using CSS. Resizing the canvas using CSS usually leads to the existing content being distorted. That's because the browser will "stretch & squish" the existing pixels to fit in the CSS resized canvas. (see: http://stackoverflow.com/questions/28049973/sizing-and-scaling-canvas-element/28051119#28051119). – markE Jan 25 '15 at 15:47