CODEWITHSUNDEEP
htmlgoogle-chromecanvas
Gb01
Gb01

Reputation: 1243

Can't draw my HTML5 canvas until page reload (on Google Chrome only)

I can't draw my HTML5 canvas until the page reload on Google Chrome only, it works fine on Firefox.

Here is a fiddle: http://jsfiddle.net/c5mGL/

<canvas id="myCanvas" width="1202" height="602" style="border:1px solid #d3d3d3;"></canvas>

(function () {
'use strict';

window.onload = function () {
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");

  function reset() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    ctx.beginPath();
    ctx.moveTo(100, 150);
    ctx.lineTo(450, 50);
    ctx.stroke();
  }

  reset();
};
})();

Everything works fine while displaying in the fiddle, since the HTML web page is embedded in an iframe. But if you look directly the generated web page http://jsfiddle.net/c5mGL/5/show/, the problem occurs.

Reproduction steps: Open Google Chrome, open a new tab, go to http://jsfiddle.net/c5mGL/5/show/, press enter and you see nothing (no error in the JavaScript console neither). Now refresh the tab and you see the line in the canvas.

It looks to be because of the size of the HTML5 canvas, since if you use a smaller canvas (300 * 200), it works well.

An idea anyone?

Many thanks.

Edit: Google Chrome version: Version 28.0.1500.72 m

Upvotes: 1

Views: 1106

Answers (1)

Mesh
Mesh

Reputation: 6442

As per the comments:

It could be a driver problem. Try disabling the Canvas hardware acceleration, chrome://flags/ AND switch channels to the Dev channel to see if the problem has already been fixed.

Upvotes: 1

Related Questions