D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
syntagmatic
Full window
Github gist
WebGL-2d HSL Fix
Use this
WebGL-2d fork
for HSL and transparency fixes
<h3>Canvas2D</h3> <canvas id="canvas-default"></canvas> <h3>Webgl-2d</h3> <canvas id="canvas-webgl"></canvas> <script src="webgl-2d.js"></script> <script> var width = 600, height = 200; var canvasDefault = document.getElementById("canvas-default"); canvasDefault.width = width; canvasDefault.height = height; var canvasWebgl = document.getElementById("canvas-webgl"); canvasWebgl.width = width; canvasWebgl.height = height; WebGL2D.enable(canvasWebgl) var ctx = canvasDefault.getContext("2d"); var webgl = canvasWebgl.getContext("webgl-2d"); var j = 10; while (--j > 0) { var i = 20; while (--i > 0) { var color = "hsl(" + (360/i) + "," + (100/j) + "%,50%)"; ctx.fillStyle = color; webgl.fillStyle = color; ctx.fillRect(30*(i-1),20*(j-1),20,15); webgl.fillRect(30*(i-1),20*(j-1),20,15); } } </script>