<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
var x=100;
var y=350;
var width = 100
var height= 400;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 5;
//context.fillStyle = 'black';
context.strokeStyle = 'black';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
// starting color
grd.addColorStop(0, 'purple');
//intermediate color
grd.addColorStop(0.5, 'blue');
// ending color
grd.addColorStop(1, 'black');
context.fillStyle = grd;
context.fill();
context.fill();
context.stroke();
//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height
No comments:
Post a Comment