Javascript Code : Draw on HTML Canvas using Javascript - Circle, Arc, Rectangle, Square , Lines , Shapes , BUtton Controlled Drawing
<html>
<head>
<title> Javascript Code : Draw on HTM Canvas using Javascript - Circle, Arc, Rectangle, Square , Lines , Shapes , BUtton Controlled Drawing </title>
</head>
<body>
<canvas height="500" id="myCanvas" style="border: 1px solid #d3d3d3;" width="1000">
Your browser does not support the HTML canvas tag.</canvas> <br />
<button id="rectangle" onclick="Rectangle()"> Rectangle </button>
<button id="cirle" onclick="Circle()"> Cirle </button>
<button id="line" onclick="Line()">Line </button>
<button id="clear" onclick="Erase()"> Clear </button>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
function Rectangle()
{
// Create gradient
var grd = ctx.createLinearGradient(50,100,5,150,60,60);
grd.addColorStop(0,"red");
grd.addColorStop(0.5,"black");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,350,200);
}
function Circle()
{
// Create gradient
var grd = ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"blue");
grd.addColorStop(1,"black");
// Fill with gradient
ctx.fillStyle = grd;
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
ctx.fill();
}
function Line()
{
// Create gradient
var gradient = ctx.createLinearGradient(0, 100, 170, 50);
gradient.addColorStop("0", "magenta");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "red");
// Fill with gradient
ctx.strokeStyle = gradient;
ctx.lineWidth = 10;
ctx.moveTo(10, 10);
ctx.lineTo(10, 400);
ctx.stroke();
ctx.fill();
}
function Erase()
{
ctx.clearRect(0,0,1000,500);
}
</script>
</body>
</html>
Comments
Post a Comment