clear part of canvas? - Javascript Canvas

Javascript examples for Canvas:Example

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

Description

clear part of 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> 
      <script type="text/javascript">
    $(window).load(function(){//from w  w w. j av  a2 s  .  com
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var cx = 150;
var cy = 150;
var startRadians = 0;
var endRadians = 300;
var deg2rad = Math.PI / 180;
var offset = 122;
//main arc
drawArc("rgb(220,220,220)", startRadians, endRadians);
$('#setRandomValue').click(function () {
    var ang = 300 * Math.random();
    drawValueArc(ang)
});
function drawArc(color, start, end) {
    ctx.beginPath();
    ctx.arc(cx, cy, 58, (startRadians + offset) * deg2rad, (end + offset) * deg2rad, false);
    ctx.strokeStyle = color;
    ctx.lineWidth = 38;
    ctx.stroke();
}
function drawValueArc(val) {
    drawArc("rgb(220,220,220)", startRadians, endRadians);
    drawArc("green", startRadians, val);
}
    });

      </script> 
   </head> 
   <body> 
      <canvas id="canvas" width="300" height="300"></canvas> 
      <button id="setRandomValue">Change</button>  
   </body>
</html>

Related Tutorials