HTML 画布 - 绘图在调整大小时消失

Question

I have created a basic shape in HTML canvas element which works fine.

The problem occurs when I resize the canvas, all the drawing in the canvas disappears. Is this the normal behavior? or is there a function that can be used to stop this?

One way to fix this could be to call drawing function again on canvas resize however this may not be very efficient if there is huge content to be drawn.

What's the best way?

Here is the link to sample code https://gist.github.com/2983915

Answer 1

You need to redraw the scene when you resize.

setting the width or height of a canvas, even if you are setting it to the same value as before , not only clears the canvas but resets the entire canvas context. Any set properties ( fillStyle , lineWidth , the clipping region, etc) will also be reset.

If you do not have the ability to redraw the scene from whatever data structures you might have representing the canvas, you can always save the entire canvas itself by drawing it to an in-memory canvas, setting the original width, and drawing the in-memory canvas back to the original canvas.

Here's a really quick example of saving the canvas bitmap and putting it back after a resize:

http://jsfiddle.net/simonsarris/weMbr/

Answer 2

Everytime you resize the canvas it will reset itself to transparant black, as defined in the spec .

You will either have to:

• redraw when you resize the canvas, or,
• don't resize the canvas

Answer 3

One another way is to use the debounce if you are concerned with the performance. It doesnt resize or redraw every position you are dragging. But it will resize only when the it is resized.

 // Assume canvas is in scope
 addEventListener.("resize", debouncedResize );

 // debounce timeout handle
 var debounceTimeoutHandle;

 // The debounce time in ms (1/1000th second)
 const DEBOUNCE_TIME = 100; 

 // Resize function 
 function debouncedResize () { 
    clearTimeout(debounceTimeoutHandle);  // Clears any pending debounce events

 // Schedule a canvas resize 
 debounceTimeoutHandle = setTimeout(resizeCanvas, DEBOUNCE_TIME);
 }

 // canvas resize function
 function resizeCanvas () { ... resize and redraw ... }

Answer 4

I had the same problem. Try following code

var wrapper = document.getElementById("signature-pad");
var canvas = wrapper.querySelector("canvas");
var ratio = Math.max(window.devicePixelRatio || 1, 1);
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;

It keeps the drawing as it is

Answer 5

One thing that worked for me was to use requestAnimationFrame() .

let height = window.innerHeight;
let width = window.innerWidth;

function handleWindowResize() {
    height = window.innerHeight;
    width = window.innerWidth;
}

function render() {
    // Draw your fun shapes here
    // ...

    // Keep this on the bottom
    requestAnimationFrame(render);
}

// Canvas being defined at the top of the file.
function init() {
    ctx = canvas.getContext("2d");

    render();
}

Answer 6

I had the same problem when I had to resize the canvas to adjust it to the screen. But I solved it with this code:

 var c = document.getElementById('canvas'); ctx = c.getContext('2d'); ctx.fillRect(0,0,20,20); // Save canvas settings ctx.save(); // Save canvas context var dataURL = c.toDataURL('image/jpeg'); // Resize canvas c.width = 50; c.height = 50; // Restore canvas context var img = document.createElement('img'); img.src = dataURL; img.onload=function(){ ctx.drawImage(img,20,20); } // Restote canvas settings ctx.restore();

 <canvas id=canvas width=40 height=40></canvas>

Answer 7

I also met this problem.but after a experiment, I found that Resizing the canvas element will automatically clear all drawings off the canvas! just try the code below

<canvas id = 'canvas'></canvas>
<script>
    var canvas1 = document.getElementById('canvas')
    console.log('canvas size',canvas1.width, canvas1.height)
    var ctx = canvas1.getContext('2d')
    ctx.font = 'Bold 48px Arial'
    var f = ctx.font
    canvas1.width = 480
    var f1 = ctx.font
    alert(f === f1) //false
</script>