Responsive canvas, resizing a canvas

    1. Changing the width or height property of a canvas in JavaScript erases its content and resets its context,
    2. Using percentages (%) in the CSS width and height properties of a canvas does not change its number of pixels/resolution. Instead, it scales the existing pixels without erasing the content, giving a blurry effect when a canvas becomes larger, for example.

Before looking at how best to handle canvas resizing, let’s see some examples below:

EXAMPLE 1: CHANGING THE SIZE OF A CANVAS ON THE FLY ERASES ITS CONTENT!

Online example: http://jsbin.com/tukave/2/edit

  1. function resizeCanvas() {
  2.      canvas.width = 300;
  3. }
  4.  
  5. <button onclick=resizeCanvas();>
  6.     Click this button to resize the canvas and erase it!
  7. </button>

EXAMPLE 2 : RESIZE A CANVAS USING CSS WIDTH AND HEIGHT PROPERTIES WITH PERCENTAGES

This time we are using a similar example as above, but we removed the button for resizing it, and we set the size of the canvas to 100×100 pixels. Instead of drawing inside, we draw two lines that join the diagonals.

Here is the online version : http://jsbin.com/luvuhe/4/edit

Then, we added this CSS rule. Try it online (resize the windows, you will see what happens): http://jsbin.com/pajifo/2/edit

It’s the same example as before, just adding the CSS:

  1. <style>
  2.     #myCanvas {
  3.        border: 1px solid black;
  4.        width:100%
  5.     }
  6. </style>

And the result shows clearly that the resolution is still the same, only the pixels are bigger!

GOOD PRACTICE: never use CSS percentages on a canvas width or height!

EXAMPLE 3: A RESPONSIVE CANVAS USING A RESIZE LISTENER +  A PARENT ELEMENT

This is the trick to create a really responsive canvas:

    1. embed it in a
      or in any parent container,
    2. Use CSS with percentages on the width and the height CSS properties of the parent,
    3. Use a resize listener on the  parent of the canvas,
    4. Change the width and height properties of the canvas from the JavaScript resize listener function (content will be erased),
    5. Redraw the content, scaled accordingly to the size of the parent.

Yep, this is not a straightforward process…

HTML, CSS and JavaScript code

div and canvas inside. Div has CSS width=100% and height = 50%

HTML code:

  1. id=“parentDiv”>
  2.      id=“myCanvas” width=“100” height=“100” >

CSS code:

  1. <style>
  2.     #parentDiv {
  3.         width:100%;
  4.         height:50%;
  5.         marginright: 10px;
  6.         border: 1px solid red;
  7.     }
  8.  
  9.     canvas {
  10.        border: 2px solid black;
  11.     }
  12. </style>

JavaScript code for the resize event listener:

  1. function init() {
  2.    …
  3.    // IMPORTANT: there is NO WAY to listen to a DIV’s resize
  4.    // listen to the window instead.
  5.    window.addEventListener(‘resize’,     
  6.                             resizeCanvasAccordingToParentSize, false);
  7.    …
  8. }
  9.  
  10. function resizeCanvasAccordingToParentSize() {
  11.      // adjust canvas size, take parent’s size, this erases content
  12.      canvas.width = divcanvas.clientWidth;
  13.      canvas.height = divcanvas.clientHeight;
  14.      
  15.      // draw something, taking into account the new canvas size
  16. }

Complete example: http://jsbin.com/tubufo/2/edit

EXAMPLE 4: THE SAME EXAMPLE WITH THE MONSTER

Online example: http://jsbin.com/xoqipo/3/edit

The code is very similar to the previous example, we just replaced drawDiagonals() by drawMonster(…), and we added a test in the drawMonster(…) function for scaling the monster if it’s bigger than the canvas width (look at lines 10-16), this is a common trick:

  1. function drawMonster(x, y, angle, headColor, eyeColor) {
  2.      // GOOD PRACTICE: SAVE CONTEXT AND RESTORE IT AT THE END
  3.      ctx.save();
  4.      // Moves the coordinate system so that the monster is drawn
  5.      // at position (x, y)
  6.      ctx.translate(x, y);
  7.      ctx.rotate(angle);
  8.      // Adjust the scale of the monster (200×200) if the canvas
  9.      // is too small
  10.      if(canvas.width < 200) {
  11.          var scaleX = canvas.width/200;
  12.          var scaleY = scaleX;
  13.      }
  14.      ctx.scale(scaleX, scaleY);
  15.      // head
  16.      ctx.fillStyle=headColor;
  17.      ctx.fillRect(0,0,200,200);
  18.      …
  19. }

#myCanvas {
       border: 1px solid black;
       width:100%
}

_____________________________________________________________________________

Using CSS % for resizing a canvas is?

Ok

Bad practice

Recommended

Not possible

<span id="answer_8680819c1e3142e8a56428dceebfbddf_2_1"/>
</fieldset>


unanswered

</div></div>

SubmitSubmit your answer

</div>
</div>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s