Skip to content

Instantly share code, notes, and snippets.

/index.html

Created June 25, 2016 19:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save anonymous/be0e6157d9366e12a2b6fcf25c093e01 to your computer and use it in GitHub Desktop.
Save anonymous/be0e6157d9366e12a2b6fcf25c093e01 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<style>
#myCanvas1 {
border: 1px solid black;
}
</style>
</head>
<body onload="init();">
<canvas id="myCanvas1" width="300" height=200>Your browser does not support the canvas tag.</canvas>
<script id="jsbin-javascript">
var canvas, ctx, grdFrenchFlag;
function init() {
// Good practice 1: set global vars canvas, ctx, gradients, etc here
canvas = document.querySelector('#myCanvas1');
ctx = canvas.getContext('2d');
// The gradient we create is also a global variable, we
// will be able to reuse it for drawing different shapes
// in different functions
grdFrenchFlag = ctx.createLinearGradient(0, 0, 300, 0);
// Try adding colors with first parameter between 0 and 1
grdFrenchFlag.addColorStop(0, "blue");
grdFrenchFlag.addColorStop(0.5, "white");
grdFrenchFlag.addColorStop(1, "red");
draw();
}
function draw() {
ctx.fillStyle = grdFrenchFlag;
ctx.fillRect(0, 0, 300, 200);
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">var canvas, ctx, grdFrenchFlag;
function init() {
// Good practice 1: set global vars canvas, ctx, gradients, etc here
canvas = document.querySelector('#myCanvas1');
ctx = canvas.getContext('2d');
// The gradient we create is also a global variable, we
// will be able to reuse it for drawing different shapes
// in different functions
grdFrenchFlag = ctx.createLinearGradient(0, 0, 300, 0);
// Try adding colors with first parameter between 0 and 1
grdFrenchFlag.addColorStop(0, "blue");
grdFrenchFlag.addColorStop(0.5, "white");
grdFrenchFlag.addColorStop(1, "red");
draw();
}
function draw() {
ctx.fillStyle = grdFrenchFlag;
ctx.fillRect(0, 0, 300, 200);
}
</script></body>
</html>
Raw
jsbin.ruguxi.js
var canvas, ctx, grdFrenchFlag;
function init() {
// Good practice 1: set global vars canvas, ctx, gradients, etc here
canvas = document.querySelector('#myCanvas1');
ctx = canvas.getContext('2d');
// The gradient we create is also a global variable, we
// will be able to reuse it for drawing different shapes
// in different functions
grdFrenchFlag = ctx.createLinearGradient(0, 0, 300, 0);
// Try adding colors with first parameter between 0 and 1
grdFrenchFlag.addColorStop(0, "blue");
grdFrenchFlag.addColorStop(0.5, "white");
grdFrenchFlag.addColorStop(1, "red");
draw();
}
function draw() {
ctx.fillStyle = grdFrenchFlag;
ctx.fillRect(0, 0, 300, 200);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment