Home/ Questions/Q 7606351
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T00:23:18+00:00

I’ve been playing around with the HTML5 Canvas and I’ve noticed something that I

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The <canvas> element keeps track of a current path (i.e., set of points, lines, and curves). canvas.moveTo, canvas.lineTo, and canvas.stroke all operate on the current path. Every time you call canvas.moveTo or canvas.lineTo you are adding to the current path. As the path gets more and more complex, drawing gets slower and slower.

    You can clear the path by calling canvas.beginPath(). Doing this at the start of your draw function should get rid of the slowdown.

    • 0