The following code with the 3 canvases works flawlessly with the latest IE and Mozilla FireFox. The third canvas (#drawingSurface3) fails on Google Chrome without any errors in the developer console. Even the lines are not drawn.
<!doctype html>
<html>
<head>
<title>Drawing lines in Canvas</title>
<style>
canvas {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<canvas id="drawingSurface" width="300" height="300">
<p>Your browser does not support the canvas element.</p>
</canvas>
<br />
<canvas id="drawingSurface2" width="300" height="300">
<p>Your browser does not support the canvas element.</p>
</canvas>
<br />
<canvas id="drawingSurface3" width="300" height="300">
<p>Your browser does not support the canvas element.</p>
</canvas>
<script src="scripts/modernzr 2-6-2.js"></script>
<script src="scripts/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var canvas = document.getElementById("drawingSurface");
var ctx;
if (ctx = canvas.getContext("2d")) {
ctx.beginPath();
ctx.moveTo(75, 50);
ctx.lineTo(75, 100);
ctx.lineTo(25, 100);
// ctx.stroke();
ctx.closePath();
ctx.stroke();
// ctx.fill();
}
var canvas2 = document.getElementById("drawingSurface2");
if (canvas2 && (ctx = canvas2.getContext("2d"))) {
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(100, 300);
ctx.lineTo(150, 300);
ctx.lineTo(150, 155);
ctx.lineTo(205, 155);
ctx.lineTo(205, 100);
ctx.closePath();
ctx.fillStyle = "#0099ff";
ctx.fill();
ctx.lineWidth = 6;
ctx.lineJoin = "round";
ctx.strokeStyle = "#cccccc";
ctx.stroke();
}
var canvas3 = document.getElementById("drawingSurface3");
if (canvas3 && (ctx = canvas3.getContext("2d"))) {
var img = new Image();
img.onload = function () {
ctx.drawImage(img, 0, 0);
//alert(ctx.getImageData());
ctx.beginPath();
ctx.moveTo(100, 125);
ctx.lineTo(150, 285);
ctx.lineTo(200, 233);
ctx.lineTo(250, 368);
ctx.lineTo(300, 402);
ctx.lineTo(350, 300);
ctx.lineTo(400, 90);
//ctx.closePath();
ctx.stroke();
};
img.src = "images/chartBackground.png";
}
});
</script>
</body>
</html>
The following code with the 3 canvases works flawlessly with the latest IE and Mozilla FireFox. The third canvas (#drawingSurface3) fails on Google Chrome without any errors in the developer console. Even the lines are not drawn.
<!doctype html>
<html>
<head>
<title>Drawing lines in Canvas</title>
<style>
canvas {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<canvas id="drawingSurface" width="300" height="300">
<p>Your browser does not support the canvas element.</p>
</canvas>
<br />
<canvas id="drawingSurface2" width="300" height="300">
<p>Your browser does not support the canvas element.</p>
</canvas>
<br />
<canvas id="drawingSurface3" width="300" height="300">
<p>Your browser does not support the canvas element.</p>
</canvas>
<script src="scripts/modernzr 2-6-2.js"></script>
<script src="scripts/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var canvas = document.getElementById("drawingSurface");
var ctx;
if (ctx = canvas.getContext("2d")) {
ctx.beginPath();
ctx.moveTo(75, 50);
ctx.lineTo(75, 100);
ctx.lineTo(25, 100);
// ctx.stroke();
ctx.closePath();
ctx.stroke();
// ctx.fill();
}
var canvas2 = document.getElementById("drawingSurface2");
if (canvas2 && (ctx = canvas2.getContext("2d"))) {
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(100, 300);
ctx.lineTo(150, 300);
ctx.lineTo(150, 155);
ctx.lineTo(205, 155);
ctx.lineTo(205, 100);
ctx.closePath();
ctx.fillStyle = "#0099ff";
ctx.fill();
ctx.lineWidth = 6;
ctx.lineJoin = "round";
ctx.strokeStyle = "#cccccc";
ctx.stroke();
}
var canvas3 = document.getElementById("drawingSurface3");
if (canvas3 && (ctx = canvas3.getContext("2d"))) {
var img = new Image();
img.onload = function () {
ctx.drawImage(img, 0, 0);
//alert(ctx.getImageData());
ctx.beginPath();
ctx.moveTo(100, 125);
ctx.lineTo(150, 285);
ctx.lineTo(200, 233);
ctx.lineTo(250, 368);
ctx.lineTo(300, 402);
ctx.lineTo(350, 300);
ctx.lineTo(400, 90);
//ctx.closePath();
ctx.stroke();
};
img.src = "images/chartBackground.png";
}
});
</script>
</body>
</html>
- It works fine for me. Are you sure that "images/chartBackground.png" is loaded? – Gaël Barbin Commented Nov 7, 2012 at 6:19
- @Gael Chrome "Network" developer tool tab identifies it as loaded. – Dante Commented Nov 7, 2012 at 6:24
- Did you have an alert when "alert(ctx.getImageData());" was not mented? – Gaël Barbin Commented Nov 7, 2012 at 6:31
1 Answer
Reset to default 6I started fooling around in chrome://flags/
Disabling accelerated 2D canvas fixed the issue:
Option:
Disable accelerated 2D canvas Mac, Windows, Linux, Chrome OS Disables the use of the GPU to perform 2d canvas rendering and instead uses software rendering.