HTML Canvas Bezier curve rotate

Description

HTML Canvas Bezier curve rotate

View in separate window 


<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function()/*from   w  w  w.  j  av a  2  s  .co m*/
{ 
              
   canvas  = document.getElementById("canvasArea"); 
   context = canvas.getContext("2d");

   // ANGLE or rotation.
   let angle = 40;

   // DRAW surface.
   context.fillStyle = "silver";
   context.fillRect(0, 0, canvas.width, canvas.height);

   // TRANSLATE to rotation point.
   context.translate(canvas.width/2, canvas.height/2);
   
   // DRAW curves.
   drawBezier(angle, "darkturquoise");
   drawBezier(angle, "deeppink");
   drawBezier(angle, "gold");
   drawBezier(angle, "mediumvioletred");
   drawBezier(angle, "yellow");
   drawBezier(angle, "teal");
   drawBezier(angle, "chartreuse");
   drawBezier(angle, "magenta");
   drawBezier(angle, "red");
}
// BEZIER curve drawing function.
function drawBezier(angle, color)
{
   // ATTRIBUTES.
   context.fillStyle     = color;
   context.lineWidth     = 7;
   context.shadowOffsetX = 3;
   context.shadowOffsetY = 3;
   context.shadowBlur    = 5;
   context.shadowColor   = "gray";

   // SHAPE parameters.
   let xStart    = 0;    let yStart    = 0;
   let xControl1 = 30;   let yControl1 = 60;
   let xControl2 = -60;  let yControl2 = 40;
   let xEnd      = 60;   let yEnd      = 60;

   // ROTATE.
   let angleInRadians = angle * Math.PI/180;
   context.rotate(angleInRadians);

   // STARTING point.
   context.beginPath();
   context.moveTo(xStart, yStart);

   // BEZIER curve.
   context.bezierCurveTo(xControl1, yControl1, 
                         xControl2, yControl2, 
                         xEnd,      yEnd);
   // DRAW curve.
   context.fill();  
}

</script>
</head>
<body>
  <div style="width: 200px; height: 200px; margin: 0 auto; padding: 5px;">
    <canvas id="canvasArea" width="200" height="200"
      style="border: 2px solid black">
Your browser doesn't currently support HTML5 Canvas.
</canvas>
  </div>
</body>
</html>



PreviousNext

Related