Login / Join
Simple Canvas Drawing
submitted on 05/08/2016 by
Codicode
+ infos
Config
Embed
Share
Simple Canvas Drawing
by
Codicode
a simple canvas drawing example.
drawing a line, QuadraticCurve, BezierCurve, Arc, Rectangle ...
(lineTo, quadraticCurveTo, bezierCurveTo, arc, rect)
Framework 1 :
-- None --
jQuery 2.0.3
jQuery 1.9.1
jQuery 1.9.0
jQuery 1.8.0
jQuery 1.7.1
jQuery 1.6.3
jQuery UI 1.10.3
MooTools 1.4.5
AngularJS 1.0.4
Prototype 1.7.1.0
Dojo 1.8.3
Chrome Frame 1.0.3
Ext Core 3.1.0
SWFObject 2.2
WebFont Loader 1.1.2
Framework 2 :
-- None --
jQuery 2.0.3
jQuery 1.9.1
jQuery 1.9.0
jQuery 1.8.0
jQuery 1.7.1
jQuery 1.6.3
jQuery UI 1.10.3
MooTools 1.4.5
AngularJS 1.0.4
Prototype 1.7.1.0
Dojo 1.8.3
Chrome Frame 1.0.3
Ext Core 3.1.0
SWFObject 2.2
WebFont Loader 1.1.2
+ Js file(s) :
+ Css file(s) :
Apply
Link :
Direct http link :
Fork button :
Html code :
Embed preview :
Copy the following html code to your page to embed the preview,
To include many previews on a single page, just repeat the first line.
You can change the width, height and border color (bcolor).
<div class="refork-widget" code="ed6" style="width:100%;height:200px;" bcolor="#ccc"></div>
<script type="text/javascript" src="//snippet.run/d/z.js"></script>
HTML
<canvas id="cc" width="600" height="400">>your browser doesn't support html5</canvas>
CSS
#cc { border: 5px solid #333; margin : 20px; }
Javascript
window.onload = function(){ var cc = document.getElementById('cc'); var ctx = cc.getContext('2d'); // Lines ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(100,200); ctx.lineTo(450,200); ctx.lineTo(550,20); ctx.lineWidth = 5; ctx.strokeStyle = "red"; ctx.stroke(); // Curve => Arc ctx.beginPath(); ctx.arc(250,100,50,Math.PI * 0.5,Math.PI * 1.9,false); ctx.lineWidth=5; ctx.strokeStyle="blue"; ctx.stroke(); // Curve => QuadraticCurve ctx.beginPath(); ctx.moveTo(50,220); ctx.quadraticCurveTo(-100,290,580,260); ctx.lineWidth = 5; ctx.strokeStyle = '#a18'; ctx.stroke(); // Curve => BezierCurve ctx.beginPath(); ctx.moveTo(30,330); ctx.bezierCurveTo(-100,500,800,150,530,380); ctx.lineWidth = 5; ctx.strokeStyle = '#333'; ctx.stroke(); // Rectangle ctx.beginPath(); ctx.rect(350,20,100,50); ctx.stroke(); }
©2013 Copyright snippet.run
Privacy
-
Terms of use
-
About
-
Contact