Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML5 Canvas slows down with each stroke and clear

Tags:

html

canvas

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.

like image 781
user852367 Avatar asked Mar 04 '12 21:03

user852367


People also ask

Is HTML5 Canvas fast?

On the one hand, canvas was fast enough on simple functions like pencil drawing due to native implementation of basic drawing methods. On the other hand, when we implemented classic Flood Fill algorithm using Pixel Manipulation API we found that it is too slow for that class of algorithms.

Is HTML5 Canvas still used?

The HTML5 canvas has the potential to become a staple of the web, enjoying ubiquitous browser and platform support in addition to widespread webpage support, as nearly 90% of websites have ported to HTML5.

What is the difference between a stroke () and a fill () function use in canvas drawing?

The stroke and fill determines how the shape is drawn. The stroke is the outline of a shape. The fill is the contents inside the shape.


1 Answers

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.

like image 197
Adam Roben Avatar answered Oct 10 '22 23:10

Adam Roben