Kristen: Broke
My fist javascript drawing!
<canvas id=“broke” width=“600” height=“300”></canvas>
<script type=“text/javascript”>
var brokeCanvas = document.getElementById(‘broke’);
var brokeContext = brokeCanvas.getContext('2d’);
brokeContext.fillStyle = ’#354704’;
brokeContext.fillRect(0,0,600,300);
brokeContext.fillStyle = “rgba(180, 186, 2, 0.75)”;
brokeContext.fillRect(25,25,100,30);
brokeContext.beginPath();
brokeContext.moveTo(0, 300);
brokeContext.lineTo(600, 0);
brokeContext.strokeStyle = “#000”;
brokeContext.lineWidth = 70;
brokeContext.stroke();
brokeContext.fillStyle = “rgba(178, 214, 86, 0.75)”;
brokeContext.fillRect(475,245,100,30);
brokeContext.beginPath();
brokeContext.arc(300, 150, 80, 0, 2 * Math.PI, false);
brokeContext.fillStyle = “rgba(191, 214, 133, 0.6)”;
brokeContext.fill();
brokeContext.fillStyle = “rgba(234, 250, 192, 0.5)”;
brokeContext.fillRect(195,135,210,30);
brokeContext.beginPath();
brokeContext.moveTo(0, 300);
brokeContext.lineTo(600, 300);
brokeContext.lineTo(600, 0);
brokeContext.lineTo(0, 300);
brokeContext.closePath();
brokeContext.fillStyle = “rgba(0, 0, 0, 0.5)”;
brokeContext.fill();
brokeContext.beginPath();
brokeContext.moveTo(457, 300);
brokeContext.lineTo(600, 300);
brokeContext.lineTo(600, 100);
brokeContext.lineTo(457, 300);
brokeContext.closePath();
brokeContext.fillStyle = “rgba(163, 168, 19, 0.3)”;
brokeContext.fill();
brokeContext.beginPath();
brokeContext.moveTo(0, 200);
brokeContext.lineTo(0, 0);
brokeContext.lineTo(143, 0);
brokeContext.lineTo(0, 200);
brokeContext.closePath();
brokeContext.fillStyle = “rgba(196, 201, 24, 0.4)”;
brokeContext.fill();
</script>
Post link