creating gradient/rainbow strokeStyle html5 canvas - Javascript Canvas

Javascript examples for Canvas:Gradient

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

Description

creating gradient/rainbow strokeStyle html5 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   w  w w .j a v a  2 s.co m
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var $canvas = $("#canvas");
var canvasOffset = $canvas.offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var scrollX = $canvas.scrollLeft();
var scrollY = $canvas.scrollTop();
var PI = Math.PI;
var points = [];
var isDown = false;
var linewidth = 15;
var steps = 50;
var lastPointX, lastPointY;
ctx.lineWidth = linewidth;
function addPoint(x, y) {
    var dx = x - lastPointX;
    var dy = y - lastPointY;
    var angle = Math.atan2(dy, dx) - PI / 2;
    ctx.strokeStyle = calcGradient(x, y, angle);
    ctx.beginPath();
    ctx.moveTo(lastPointX, lastPointY);
    for (var i = -8; i < steps; i++) {
        var xx = lastPointX + dx * i / (steps - 1);
        var yy = lastPointY + dy * i / (steps - 1);
        ctx.lineTo(xx, yy);
    }
    ctx.stroke();
    lastPointX = x;
    lastPointY = y;
}
function calcGradient(x, y, angle) {
    var offX1 = x + linewidth / 2.25 * Math.cos(angle);
    var offY1 = y + linewidth / 2.25 * Math.sin(angle);
    var offX2 = x + linewidth / 2.25 * Math.cos(angle - PI);
    var offY2 = y + linewidth / 2.25 * Math.sin(angle - PI);
    var gradient = ctx.createLinearGradient(offX1, offY1, offX2, offY2);
    gradient.addColorStop(0.00, 'red');
    gradient.addColorStop(1 / 6, 'orange');
    gradient.addColorStop(2 / 6, 'yellow');
    gradient.addColorStop(3 / 6, 'green')
    gradient.addColorStop(4 / 6, 'aqua');
    gradient.addColorStop(5 / 6, 'blue');
    gradient.addColorStop(1.00, 'purple');
    return (gradient);
}
function handleMouseDown(e) {
    e.preventDefault();
    e.stopPropagation();
    lastPointX = parseInt(e.clientX - offsetX);
    lastPointY = parseInt(e.clientY - offsetY);
    isDown = true;
}
function handleMouseUp(e) {
    e.preventDefault();
    e.stopPropagation();
    isDown = false;
}
function handleMouseMove(e) {
    if (!isDown) {
        return;
    }
    e.preventDefault();
    e.stopPropagation();
    mouseX = parseInt(e.clientX - offsetX);
    mouseY = parseInt(e.clientY - offsetY);
    addPoint(mouseX, mouseY);
}
$("#canvas").mousedown(function (e) {
    handleMouseDown(e);
});
$("#canvas").mousemove(function (e) {
    handleMouseMove(e);
});
$("#canvas").mouseup(function (e) {
    handleMouseUp(e);
});
$("#canvas").mouseout(function (e) {
    handleMouseUp(e);
});
    });

      </script> 
   </head> 
   <body> 
      <h4>Drag in red canvas to draw rainbow stroke.</h4> 
      <canvas id="canvas" width="300" height="300"></canvas>  
   </body>
</html>

Related Tutorials