I've been playing around with the HTML5 Canvas and I've noticed something that I couldn't find a resolution for online. Here's the simple code I'm playing with
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<canvas id="canvas" style="border: 1px solid;" width="200" height="200"></canvas>
<br />
<button id="draw">draw</button>
<button id="clear">clear</button>
</body>
</html>
<script type="text/javascript">
(function () {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
$("#draw").bind("click", function () {
for (var i = 0; i < 200; i++) {
context.moveTo(0, i);
context.lineTo(100, 100);
context.stroke();
}
});
$("#clear").bind("click", function () {
context.clearRect(0, 0, 200, 200);
});
} ());
</script>
Each time that I press draw, the speed at which it completes seems to slow down exponentially. Could anyone know why this is happening?
It slows down the most through IE. Chrome seems to complete it faster with each draw click, but you can still definitely notice a speed reduction.
See Question&Answers more detail:os
