Skip to content

Instantly share code, notes, and snippets.

@Lull3rSkat3r
Created May 29, 2012 22:00
Show Gist options
  • Save Lull3rSkat3r/2831067 to your computer and use it in GitHub Desktop.
Save Lull3rSkat3r/2831067 to your computer and use it in GitHub Desktop.
Some canvas elements for me to work with
/* Blue Dude */
var draw = function(ctx) {
ctx.save();
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(640,0);
ctx.lineTo(640,480);
ctx.lineTo(0,480);
ctx.closePath();
ctx.clip();
ctx.strokeStyle = 'rgba(0,0,0,0)';
ctx.lineCap = 'butt';
ctx.lineJoin = 'miter';
ctx.miterLimit = 4;
ctx.save();
ctx.save();
ctx.restore();
ctx.save();
ctx.fillStyle = "rgba(0, 0, 0, 0)";
ctx.strokeStyle = "#0064a6";
ctx.lineWidth = 40;
ctx.lineCap = "butt";
ctx.lineJoin = "miter";
ctx.beginPath();
ctx.moveTo(282,189);
ctx.bezierCurveTo(296.5,182,324,145,323.5,107.625);
ctx.bezierCurveTo(323,70.25,293.5,30.5,240,30);
ctx.bezierCurveTo(186.5,29.5,167.75,88.25,167.25,114.125);
ctx.bezierCurveTo(166.75,140,175.9375,149.53125,191.1875,167.26563);
ctx.bezierCurveTo(206.4375,185.00000999999997,209,197.50000999999997,205,225.00000999999997);
ctx.bezierCurveTo(201,252.50000999999997,174,245.00000999999997,128,251.00000999999997);
ctx.bezierCurveTo(82,257.00001,103,336.00001,102,374.00001);
ctx.bezierCurveTo(101,412.00001,136,405.00001,237,402.00001);
ctx.bezierCurveTo(338,399.00001,372,410.00001,384,394.00001);
ctx.bezierCurveTo(396,378.00001,390,308.25001,381.75,274.62501);
ctx.bezierCurveTo(373.5,241.00000999999997,350,246.00000999999997,309,246.00000999999997);
ctx.fill();
ctx.stroke();
ctx.restore();
ctx.restore();
ctx.restore();
};
/* Orange Dude */
var draw = function(ctx) {
ctx.save();
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(640,0);
ctx.lineTo(640,480);
ctx.lineTo(0,480);
ctx.closePath();
ctx.clip();
ctx.strokeStyle = 'rgba(0,0,0,0)';
ctx.lineCap = 'butt';
ctx.lineJoin = 'miter';
ctx.miterLimit = 4;
ctx.save();
ctx.save();
ctx.restore();
ctx.save();
ctx.fillStyle = "rgba(0, 0, 0, 0)";
ctx.strokeStyle = "#de6400";
ctx.lineWidth = 40;
ctx.lineCap = "butt";
ctx.lineJoin = "miter";
ctx.beginPath();
ctx.moveTo(282,189);
ctx.bezierCurveTo(296.5,182,324,145,323.5,107.625);
ctx.bezierCurveTo(323,70.25,293.5,30.5,240,30);
ctx.bezierCurveTo(186.5,29.5,167.75,88.25,167.25,114.125);
ctx.bezierCurveTo(166.75,140,175.9375,149.53125,191.1875,167.26563);
ctx.bezierCurveTo(206.4375,185.00000999999997,209,197.50000999999997,205,225.00000999999997);
ctx.bezierCurveTo(201,252.50000999999997,174,245.00000999999997,128,251.00000999999997);
ctx.bezierCurveTo(82,257.00001,103,336.00001,102,374.00001);
ctx.bezierCurveTo(101,412.00001,136,405.00001,237,402.00001);
ctx.bezierCurveTo(338,399.00001,372,410.00001,384,394.00001);
ctx.bezierCurveTo(396,378.00001,390,308.25001,381.75,274.62501);
ctx.bezierCurveTo(373.5,241.00000999999997,350,246.00000999999997,309,246.00000999999997);
ctx.fill();
ctx.stroke();
ctx.restore();
ctx.restore();
ctx.restore();
};
/*Green Dude*/
var draw = function(ctx) {
ctx.save();
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(640,0);
ctx.lineTo(640,480);
ctx.lineTo(0,480);
ctx.closePath();
ctx.clip();
ctx.strokeStyle = 'rgba(0,0,0,0)';
ctx.lineCap = 'butt';
ctx.lineJoin = 'miter';
ctx.miterLimit = 4;
ctx.save();
ctx.save();
ctx.restore();
ctx.save();
ctx.fillStyle = "rgba(0, 0, 0, 0)";
ctx.strokeStyle = "#90d058";
ctx.lineWidth = 40;
ctx.lineCap = "butt";
ctx.lineJoin = "miter";
ctx.beginPath();
ctx.moveTo(282,189);
ctx.bezierCurveTo(296.5,182,324,145,323.5,107.625);
ctx.bezierCurveTo(323,70.25,293.5,30.5,240,30);
ctx.bezierCurveTo(186.5,29.5,167.75,88.25,167.25,114.125);
ctx.bezierCurveTo(166.75,140,175.9375,149.53125,191.1875,167.26563);
ctx.bezierCurveTo(206.4375,185.00000999999997,209,197.50000999999997,205,225.00000999999997);
ctx.bezierCurveTo(201,252.50000999999997,174,245.00000999999997,128,251.00000999999997);
ctx.bezierCurveTo(82,257.00001,103,336.00001,102,374.00001);
ctx.bezierCurveTo(101,412.00001,136,405.00001,237,402.00001);
ctx.bezierCurveTo(338,399.00001,372,410.00001,384,394.00001);
ctx.bezierCurveTo(396,378.00001,390,308.25001,381.75,274.62501);
ctx.bezierCurveTo(373.5,241.00000999999997,350,246.00000999999997,309,246.00000999999997);
ctx.fill();
ctx.stroke();
ctx.restore();
ctx.restore();
ctx.restore();
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment