CODEWITHSUNDEEP
javascripthtmlcanvas
user2877778
user2877778

Reputation: 37

how do make the radius of the circle responsive in canvas element?

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)

Upvotes: 0

Views: 3094

Answers (3)

markE
markE

Reputation: 105015

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);

Upvotes: 1

Suchit kumar
Suchit kumar

Reputation: 11859

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

Upvotes: 0

Anubhav
Anubhav

Reputation: 7208

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

Upvotes: 0

Related Questions