fade out lines after drawing canvas? - Javascript Canvas

Javascript examples for Canvas:Line

  1. HOME
  2. Javascript
  3. Canvas
  4. Line

Description

fade out lines after drawing canvas?

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script> 
      <style id="compiled-css" type="text/css">

body{ background-color: ivory; }
#canvas{border:1px solid red;}


      </style> 
      <script type="text/javascript">
    $(window).load(function(){//from   ww w  . j av a2 s .c  om
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.lineCap = "round";
ctx.lineJoin = "round";
ctx.lineWidth = 4;
ctx.strokeStyle = "blue";
var $canvas = $("#canvas");
var canvasOffset = $canvas.offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var scrollX = $canvas.scrollLeft();
var scrollY = $canvas.scrollTop();
var isDown = false;
var startX;
var startY;
var points = [];
var s = 0;
animate();
function drawLatestLines() {
    s += 0.50;
    var ss = parseInt(s);
    if (s > points.length - 2) {
        return;
    }
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.moveTo(points[ss].x, points[ss].y);
    for (var i = ss; i < points.length; i++) {
        ctx.lineTo(points[i].x, points[i].y);
    }
    ctx.stroke();
}
function animate() {
    requestAnimationFrame(animate);
    drawLatestLines();
}
function handleMouseDown(e) {
    e.preventDefault();
    e.stopPropagation();
    startX = parseInt(e.clientX - offsetX);
    startY = parseInt(e.clientY - offsetY);
    // Put your mousedown stuff here
    points.length = 0;
    points.push({
        x: startX,
        y: startY
    });
    s = 0;
    isDown = true;
}
function handleMouseUp(e) {
    e.preventDefault();
    e.stopPropagation();
    mouseX = parseInt(e.clientX - offsetX);
    mouseY = parseInt(e.clientY - offsetY);
    // Put your mouseup stuff here
    isDown = false;
}
function handleMouseOut(e) {
    e.preventDefault();
    e.stopPropagation();
    mouseX = parseInt(e.clientX - offsetX);
    mouseY = parseInt(e.clientY - offsetY);
    // Put your mouseOut stuff here
    isDown = false;
}
function handleMouseMove(e) {
    if (!isDown) {
        return;
    }
    e.preventDefault();
    e.stopPropagation();
    mouseX = parseInt(e.clientX - offsetX);
    mouseY = parseInt(e.clientY - offsetY);
    points.push({
        x: mouseX,
        y: mouseY
    });
}
$("#canvas").mousedown(function (e) {
    handleMouseDown(e);
});
$("#canvas").mousemove(function (e) {
    handleMouseMove(e);
});
$("#canvas").mouseup(function (e) {
    handleMouseUp(e);
});
$("#canvas").mouseout(function (e) {
    handleMouseOut(e);
});
    });

      </script> 
   </head> 
   <body> 
      <h4>drag the mouse quickly to draw disappearing line.</h4> 
      <canvas id="canvas" width="300" height="300"></canvas>  
   </body>
</html>

Related Tutorials