javascript - How to write a loop so that I will draw to user canvas? -

I have a canvas element, I have some problems, how to attract the user canvas in "real time" , When my site is already open, my drawing is not already, but it is actually to draw in the canvas to be painted ... then looping through coordinates.

This is what I have tried so far, but it is BAAD! It is gradually outlined and has a lot of CPU in it.

  // pencil points var ppts = []; / * Drawing on paint app * / tmp_ctx.lineWidth = 4; Tmp_ctx.lineJoin = 'round'; Tmp_ctx.lineCap = 'round'; Tmp_ctx.strokeStyle = '# 4684F6'; Tmp_ctx.fillStyle = '# 4684F6'; TMP_ctx.clear (0, 0, tmp_canvas.width, tmp_canvas.height) before drawing / tmp canvas is always cleaned; Tmp_ctx.beginPath (); Var Timer = 0; $ .timers (500, works () {ppts.push ({x: 10 * timers, y: 5 * timers}); timer ++;} $ .temer (10, function) (if (timer & gt; 250) {Timer = 0; ExplicitTempCanvas ();} and {for (var i = 1; i & lt; ppts.length - 2; i ++) {var c = (ppts [i] .x + ppts [ I + 1] .x / 2; var d = (ppts [i] .y + ppts [i + 1] .i) / 2; tmp_ctx.quadraticCurveTo (ppts [i] .x, ppts [i] .y , C, d);} Console.log (i); tmp_ctx.stroke ();}}) function clearTempCanvas () {// write down the actual canvas now ctx.drawImage (tmp_canvas, 0, 0); // Clearing TMP canvas tmp_ctx.clear (0, 0, tmp_canvas.width, tmp_canvas.height); // Empty pencil point ppts = []; }  

Here's an example for you:

Works as:

• Define some points to animate together and put those points in array points. ({X: 25, y: 50})
• Use
• to break each subdivision into 100 sub-sections and animate it with those sub-sections

Example Code:

   Doctype html & gt; & Lt; Html & gt; & Lt; Top & gt; & Lt; Link rel = "stylesheet" type = "text / css" media = "all" href = "css / reset.css" /> & Lt; Script src = "http://code.jquery.com/jquery.min.js" & gt; & Lt; / Script & gt; & Lt; Style & gt; Body {background color: ivory; } Canvas {boundary: 1 px solid red;}  100) {linePct = 1; If (++ pointIndex> digits.length-1) {continueAnimating = false; }}} Function getLineXYatPercent (startPt, endPt, percent) {var dx = endPt.x-startPt.x; Var dy = endPt.y-startPt.y; Var X = startPt.x + dx * percent; Var Y = startPt.y + de * percent; Return ({x: X, y: y}); }}); // End $ (function () {}); & Lt; / Script & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Canvas id = "canvas" width = 350 height = 350> gt; & Lt; / Canvas & gt; & Lt; / Body & gt; & Lt; / Html & gt;