CODEWITHSUNDEEP
javascripthtmlcanvasdrawing
geeky_monster
geeky_monster

Reputation: 8792

How to automatically scale pixel positions in HTML5 Canvas?

I have created an HTML5 based drawing application which used HTML5 Canvas element . I have written code to draw sketches on the Canvas .

enter image description here

The original size of the Canvas was 500 px x 500 px . All the drawings were made according to that . Now my problem is I need to change the Canvas size to 1000 x 1000 and want to make the drawings cover the entire new canvas . Is there any easy way to do this rather than tinker with the pixel positions directly ?

Upvotes: 0

Views: 1202

Answers (2)

Don Cowan
Don Cowan

Reputation: 1

I believe that what you want to do is scale and possibly translate the position of your canvas.

Here is a working example: http://marketimpacts.com/storage/9781118385357%20ls0701%20Resizing%20and%20Scaling%20the%20Canvas.htm

If this is not what you need, other Canvas examples are here: http://donkcowan.com/html5-canvas-for-dummies/

Here's the code:

<!DOCTYPE HTML> <html> <head> <script> 

// SUMMARY: Draws random circles on a 
// resized and rescaled canvas.

// A. WINDOW LOAD function.                      
window.onload = function()
{ 
   // A1. CANVAS definition standard variables.            
   canvas  = document.getElementById("canvasArea"); 
   context = canvas.getContext("2d");

   // A2. PARAMETERS for circles.
   var numCircles = 300;
   var maxRadius  = 20;
   var minRadius  = 3;
   var colors     = ["aqua",  "black", "blue",  "fuchsia",
                     "green", "cyan",  "lime",  "maroon",
                     "navy",  "olive", "purple","red",
                     "silver","teal",  "yellow","azure",
                     "gold",  "bisque","pink",  "orange"];
   var numColors  =  colors.length;

   // A3. RESIZE & RESCALE canvas.
   canvas.width  = 400;   canvas.height = 100;
   context.scale(.7, .3);

   // A4. CREATE circles.
   for(var n=0; n<numCircles; n++)
   {
      // A5. RANDOM values for circle characteristics.
      var xPos       =  Math.random()*canvas.width;
      var yPos       =  Math.random()*canvas.height;
      var radius     =  minRadius+(Math.random()*(maxRadius-minRadius));
      var colorIndex =  Math.random()*(numColors-1);
      colorIndex     =  Math.round(colorIndex);
      var color      =  colors[colorIndex];

      // A6. DRAW circle.
      drawCircle(context, xPos, yPos, radius, color);
   }
};
// B. CIRCLE drawing function.
function drawCircle(context, xPos, yPos, radius, color)
{
   //B1. PARAMETERS for shadow and angles.
   var startAngle        = (Math.PI/180)*0;
   var endAngle          = (Math.PI/180)*360;
   context.shadowColor   = "gray";
   context.shadowOffsetX = 1;
   context.shadowOffsetY = 1;
   context.shadowBlur    = 5;

   //B2. DRAW CIRCLE
   context.beginPath();
   context.arc(xPos, yPos, radius, startAngle, endAngle, false);
   context.fillStyle = color;
   context.fill();              

}
</script> </head> <body> 
<!-- C. CANVAS definition -->
<div    style = "width:200px;   height:200px; 
                 margin:0 auto; padding:5px;">
<canvas id    = "canvasArea" 
        width = "200"  height = "200" 
        style = "border:2px solid black">
Your browser doesn't currently support HTML5 Canvas.
</canvas> </div> 
</body> </html>

Upvotes: 0

Tom
Tom

Reputation: 4592

You could change the canvas size using CSS and keep the width and height properties of the canvas element constant. This will create the stretching you need.

Upvotes: 3

Related Questions