<canvas id="canvas" width="100" height="100"></canvas> | |
<script> | |
var canvas = document.getElementById('canvas'); | |
var ctx = canvas.getContext('2d'); | |
var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0); | |
gradient.addColorStop(0, '#0f0'); | |
gradient.addColorStop(1, '#00f'); | |
ctx.fillStyle = gradient; | |
ctx.fillRect(0, 0, canvas.width, canvas.height); | |
ctx.fillStyle = '#00f'; | |
ctx.fillRect(40, 40, 20, 20); | |
</script> |