canvas tag produces black block in chrome

问题

This is very frustrating. If I don't set the height and width of the canvas, canvas draws just fine, but when I do set the height and width I get back a black box. I've stripped my code down to an insane degree and can't find any problem. The canvas tag works great in FF and IE9.

var canvas = document.getElementById('can1');
var ctx = canvas.getContext('2d');   

canvas.width    = 280;  
canvas.height   = 270;

ctx.clearRect(0, 0, canvas.width, canvas.height);

Even just this destroys the canvas in google chrome. No matter how little I draw, if the height or width is set it fails. If I set the height or width with css instead, it produces a distorted result.

Any ideas?

UPDATE: I've discovered that if my canvas is small enough, it works in chrome. However I need a canvas that is 280x270 not 100x100

回答1:

Possible solution! For all animation use RequestAnimationFrame. Just worked on one of my projects!

来源：https://stackoverflow.com/questions/10439952/canvas-tag-produces-black-block-in-chrome