Introduction
I've seen quite a few HTML5 canvass painting examples, but I had not seen one that worked on both a touch on screen, and on a normal desktop with a mouse. This is just a very basic example of what is needed to get this characteristic working on both.
Groundwork
Some time back I had to develop an HTML5 customer input class which also included a signature. This would be used more often than not on a tablet, however it was possible information technology needed to be supported on a drawing pad and a desktop PC. I viewed quite a few online examples of painting on the canvas, but none worked on touch on screens AND desktops:
http://mudcu.exist/sketchpad/
http://devfiles.myopera.com/articles/649/example5.html
This is merely an alternate to Gordon Kushner's article on the HTML5 canvas & painting. His article can be found here: http://www.codeproject.com/Articles/351253/HTML-5-Canvas-A-Simple-Pigment-Program. His code works well; though again it does not work on a touch device.
Well-nigh of the code here I constitute from various examples on Code Project and Stack Overflow. I only put them all together to go this demo working.
Using the code
This code just determines which device type y'all are using and sets upwards the canvas event handlers accordingly.
< !DOCTYPE html > < html lang =" en" > < head > < meta charset =" utf-8" / > < championship >Desktops and Tablets< /championship > < script blazon =" text/javascript" src =" https://ajax.googleapis.com/ajax/libs/jquery/one.7.i/jquery.min.js" > < / script > < script blazon =" text/javascript" > $(certificate).gear up(function () { initialize(); }); office getPosition(mouseEvent, sigCanvas) { var x, y; if (mouseEvent.pageX != undefined && mouseEvent.pageY != undefined) { 10 = mouseEvent.pageX; y = mouseEvent.pageY; } else { x = mouseEvent.clientX + document.body.scrollLeft + certificate.documentElement.scrollLeft; y = mouseEvent.clientY + document.torso.scrollTop + document.documentElement.scrollTop; } return { Ten: x - sigCanvas.offsetLeft, Y: y - sigCanvas.offsetTop }; } part initialize() { var sigCanvas = document.getElementById(" canvasSignature"); var context = sigCanvas.getContext(" 2d"); context.strokeStyle = ' Blackness'; var is_touch_device = ' ontouchstart' in document.documentElement; if (is_touch_device) { var drawer = { isDrawing: false, touchstart: function (coors) { context.beginPath(); context.moveTo(coors.x, coors.y); this.isDrawing = true; }, touchmove: function (coors) { if (this.isDrawing) { context.lineTo(coors.x, coors.y); context.stroke(); } }, touchend: function (coors) { if (this.isDrawing) { this.touchmove(coors); this.isDrawing = false; } } }; function describe(effect) { var coors = { x: event.targetTouches[0].pageX, y: event.targetTouches[0].pageY }; var obj = sigCanvas; if (obj.offsetParent) { do { coors.x -= obj.offsetLeft; coors.y -= obj.offsetTop; } while ((obj = obj.offsetParent) != cipher); } drawer[event.type](coors); } sigCanvas.addEventListener(' touchstart', draw, false); sigCanvas.addEventListener(' touchmove', draw, false); sigCanvas.addEventListener(' touchend', draw, false); sigCanvas.addEventListener(' touchmove', office (event) { event.preventDefault(); }, simulated); } else { $(" #canvasSignature").mousedown(function (mouseEvent) { var position = getPosition(mouseEvent, sigCanvas); context.moveTo(position.Ten, position.Y); context.beginPath(); $(this).mousemove(function (mouseEvent) { drawLine(mouseEvent, sigCanvas, context); }).mouseup(function (mouseEvent) { finishDrawing(mouseEvent, sigCanvas, context); }).mouseout(function (mouseEvent) { finishDrawing(mouseEvent, sigCanvas, context); }); }); } } function drawLine(mouseEvent, sigCanvas, context) { var position = getPosition(mouseEvent, sigCanvas); context.lineTo(position.X, position.Y); context.stroke(); } function finishDrawing(mouseEvent, sigCanvas, context) { drawLine(mouseEvent, sigCanvas, context); context.closePath(); $(sigCanvas).unbind(" mousemove") .unbind(" mouseup") .unbind(" mouseout"); } < / script > < /head > < body > < h1 >Canvas test< /h1 > < div id =" canvasDiv" > <!-- < sheet id =" canvasSignature" width =" 500px" height =" 500px" mode =" edge:2px solid #000000;" > < /sheet > < /div > < /torso > < /html > 
General 
News 
Proffer 
Question 
Bug 
Reply 
Joke 
Praise 
Rant 
Admin
0 Response to "How Can I Start Making A Simple Paint Program In Html Canvas?"
Post a Comment