Login / Join
Drawing on a Html5 Canvas element
submitted on 26/02/2013 by
Codicode
+ infos
Config
Embed
Share
Drawing on a Html5 Canvas element
by
Codicode
Use the mouse to draw on the canvas surface, you can change the pen width and colors ...
by Chtiwi Malek.
Source : http://www.codicode.com/art/how_to_draw_on_a_html5_canvas_with_a_mouse.aspx
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="fcc" style="width:100%;height:200px;" bcolor="#ccc"></div>
<script type="text/javascript" src="//snippet.run/d/z.js"></script>
HTML
<canvas id="myCanvas"></canvas> <div class="controls"> <button onclick="javascript:clearArea();return false;">Clear Area</button> Line width : <select id="selWidth"> <option value="1">1</option> <option value="3">3</option> <option value="5" selected="selected">5</option> <option value="7">7</option> <option value="9">9</option> <option value="11">11</option> </select> Color : <select id="selColor"> <option value="black">black</option> <option value="blue" selected="selected">blue</option> <option value="red">red</option> <option value="green">green</option> <option value="yellow">yellow</option> <option value="gray">gray</option> </select> </div>
CSS
/* by Chtiwi Malek */ /* http://www.codicode.com */ body{ overflow:hidden; } #mycanvas { background-color:#fff; } .controls { position:absolute; top:0px; left:0px; background-color:#2277dd; padding:5px; margin:2px; color:#fff; -webkit-border-radius: 3px; border-radius: 3px; }
Javascript
/* by Chtiwi Malek */ /* http://www.codicode.com */ var mousePressed = false; var lastX, lastY; var ctx; $(window).load(function () { canv = document.getElementById('myCanvas'); ctx = canv.getContext("2d"); canv.width = $(window).width(); canv.height = 1000; $('#myCanvas').mousedown(function (e) { mousePressed = true; //Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, false); Draw(e.pageX, e.pageY, false); }); $('#myCanvas').mousemove(function (e) { if (mousePressed) { //Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, true); Draw(e.pageX , e.pageY , true); } }); $('#myCanvas').mouseup(function (e) { mousePressed = false; }); $('#myCanvas').mouseleave(function (e) { mousePressed = false; }); }); function Draw(x, y, isDown) { if (isDown) { ctx.beginPath(); ctx.strokeStyle = $('#selColor').val(); ctx.lineWidth = $('#selWidth').val(); ctx.lineJoin = "round"; ctx.moveTo(lastX, lastY); ctx.lineTo(x, y); ctx.closePath(); ctx.stroke(); } lastX = x; lastY = y; } function clearArea() { // Use the identity matrix while clearing the canvas ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); }
©2013 Copyright snippet.run
Privacy
-
Terms of use
-
About
-
Contact