canvas

by atheer Salim

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <canvas width="500p" height="300px" id="can"></canvas>
  <button id ="clear">Clear</button>
</body>
</html>

CSS

#can {
  border-style: solid;
}

#clear {
  padding: 10px;
  font-size: 20px;
}

JavaScript

var getCanvas = document.getElementById("can");
var canvas = getCanvas.getContext("2d");

var gradient = canvas.createLinearGradient(0, 0, 0, 170);
gradient.addColorStop(0, "red");
gradient.addColorStop(1, "blue");

canvas.fillStyle = gradient;
canvas.strokeStyle = "blue";

canvas.fillRect(20,20, 150, 100);
canvas.strokeRect(180,40,50,50);


canvas.beginPath();
canvas.moveTo(20, 170);
canvas.lineTo(20, 220);
canvas.lineTo(170, 220);

canvas.closePath();
canvas.strokeStyle = "red";
canvas.stroke();

canvas.fillStyle = "green";
canvas.font = "20pt arial";
canvas.fillText("Hello World", 20, 250);

$("#clear").click(function() {
	getCanvas.width = getCanvas.width;
});