0

I have a canvas element in which I have drawn a circle. How do I give the responsiveness to the canvas element?

If the width of the browser changes I need to change the radius by some amount, if the height of the browser changes I need to change the radius by some amount.

For that how do I need to calculate the changing ratio?

var canvasWidthRatio = currentDivWidth / initialDivWidth;
var canvasHeightRatio = currentHeight / initialDivHeight;
radius = (I need something here)
Jason Aller
  • 3,541
  • 28
  • 38
  • 38
user2877778
  • 37
  • 1
  • 8
  • checkout this answer http://stackoverflow.com/questions/1821702/resize-image-map-on-window-resize it is about an image map but you can rewrite that for your needs and the canvas element – Velimir Tchatchevsky Dec 23 '14 at 04:12
  • 1
    This question would be improved by the addition of a jsfiddle showing how you've set up the canvas and the responsiveness on the page. http://jsfiddle.net/ – Jason Aller Dec 23 '14 at 04:27

3 Answers3

1

It appears you're letting the canvas resize based on its div container. That can introduce a problem.

If you resize the canvas's CSS using different percentages for width & height then the canvas content will distort--it will stretch.

To avoid distortion you must resize the canvas width & height proportionally (by the same percentage). The proportionally resized canvas will not necessarily fill the new div size as it did before.

An alternative:

Resize the canvas element itself & use the scaling transformation to redraw your content

This way you won't need to recalculate your circle's radius or position. You can use the exact same drawing commands that were originally used to draw your circle. The canvas's built-in scaling will do all the recalculations for you!

  1. Get a reference to your canvas & your div container and save the original div size

    var divcontainer=document.getElementById('mydiv');
var canvas=document.getElementById('mycanvas');
var context=canvas.getContext('2d');

var originalWidth=divcontainer.width;
var originalHeight=divcontainer.height;

  2. Resize the canvas element to the new div size.

    var newWidth=divcontainer.width;
var newHeight=divcontainer.height;

// Notes:
// Resizing the canvas element will clear its content
// This alternative allows the canvas to resize disproportionately
canvas.width=newWidth;
canvas.height=newHeight;

  3. Use context scaling to automatically resize the canvas. Any redrawn content will scale automatically using the same original drawing commands.

    // calculate the scaling percentage necessary such that
// new content will fit on the canvas
var scaleFactor=Math.min((newWidth/originalWidth),(newHeight/originalHeight));

// scale the canvas
context.scale(scaleFactor);

// now redraw all content (your circle) using their original sizes & coordinates

// unscale the canvas
// (scaling is cumulative, so this cleans up for the next resizing)
context.scale(-scaleFactor);
markE
  • 102,905
  • 11
  • 164
  • 176
0

try this

var radius = 10; // set default radius to start with
var radiusX = Math.min(currentDivWidth , radius); // set horizontal radius to be atleast as wide as width of div
var radiusY = Math.min(currentDivHeight , radius); // set vertical radius to be atleast as high as height of div

radius = Math.min(radiusX, radiusY); // now set the radius of the circle equal to the minimum of the two values so that it is a perfect circle

context.arc(0, 0, radius, 0, 2*Math.PI, false); // use new radius to draw a brand new circle
Anubhav
  • 7,138
  • 5
  • 21
  • 33
0

try using like this:

radius = Math.min(radiusX, radiusY);// here radiusX and radiusY will be currentDivWidth,currentDivHeight resp.

context.arc(0, 0, radius, 0, 2*Math.PI);

see a better description here:http://www.w3schools.com/tags/canvas_arc.asp

Suchit kumar
  • 11,809
  • 3
  • 22
  • 44