javascript - Add color and Eraser to html5 canvas drawing -
am learning html5 canvas drawing in nodejs tutorial found online.
everything works fine. want add colors , eraser 1 can choose colors , erase part of drawing respectively.
for eraser, have tried add example found here http://jsfiddle.net/66z12xb0/
as per line of code
<button type='button' id='eraser'>eraser</button> $("#eraser").click(function() { strokestyle = "#ffffff"; }); for adding colors, have tried
$("#colors").click(function() { strokestyle = "black"; }); <div class="colors" id="colors"> <div class="color black"></div> <div class="color red"></div> <div class="color green"></div> <div class="color blue"></div> <div class="color yellow"></div> </div> <style> /** * fix user-agent */ * { box-sizing: border-box; } html, body { height: 100%; margin: 0; padding: 0; } /** * canvas */ .mycanvas { height: 100%; width: 80%; position: absolute; left: 0; right: 0; bottom: 0; top: 0; } .colors { position: fixed; } .color { display: inline-block; height: 48px; width: 48px; } .color.black { background-color: black; } .color.red { background-color: red; } .color.green { background-color: green; } .color.blue { background-color: blue; } .color.yellow { background-color: yellow; } .color.white { background-color: white; } </style> my problem cannot color selection , eraser work. can me fix issue. thanks
below working index.html
<!doctype html> <html lang="en"> <head> <title>whiteboard - client side</title> <style type="text/css"> body { background-color: #e9e9e9; } #mycanvas { background-color: #fff; width: 800px; height: 600px; } </style> </head> <body> <!-- note id of our canvas #mycanvas --> <canvas id="mycanvas" class="mycanvas"></canvas> <!-- import jquery, socket.io , our whiteboard.js --> <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <script src="https://cdn.socket.io/socket.io-1.4.5.js"></script> <script src="whiteboard.js"></script> <!-- our javascript code, in .js file --> <script type="text/javascript"> var socket = io(); socket.on("connect", function() { /* @ point have connected server, can create new whiteboard instance. pass our canvas (`#mycanvas`) , socket */ var whiteboard = new whiteboard($("#mycanvas"), socket); }); </script> </body> </html> below working whiteboard.js
var whiteboard = (function($, window) { "use strict"; const thickness_min = 1; const thickness_max = 120; var _canvas = null, _ctx = null; var _color = null, _thickness = null; var socketevents = { draw: "draw", drawbeginpath: "draw begin path" }; /** * constructor * * @param {jquery} $canvas canvas jquery object * @param {socket} socket socket.io socket, * can send/receive drawing data * @param {string} [color="#4d4d4d"] default color * @param {number} [thickness=4] default thickness * @constructor */ function whiteboard($canvas, socket, color, thickness) { color = (typeof color !== "undefined") ? color : "#4d4d4d"; thickness = (typeof thickness !== "undefined") ? thickness : 4; if (!(this instanceof whiteboard)) { throw new typeerror("cannot call class function"); } _canvas = $canvas[0]; _ctx = _canvas.getcontext("2d"); _color = color; _thickness = thickness; $canvas.mousedown(function() { _ctx.beginpath(); socket.emit(socketevents.drawbeginpath); }); $canvas.mousemove(function(e) { // check if we're holding left click down while moving mouse if (e.buttons == 1) { draw(e.originalevent, socket); } }); resizecanvas(); $(window).resize(resizecanvas); socket.on(socketevents.draw, socketdraw); socket.on(socketevents.drawbeginpath, function() { _ctx.beginpath(); }); } /** * resize canvas, width , height * attributes same offsetwidth * , offsetheight * * .width , .height defaults 300px , * 150px , have change them match * .offsetwidth , .offsetheight, * layout width , heights of our scaled canvas * (the ones have set in our css file) */ function resizecanvas() { _canvas.width = _canvas.offsetwidth; _canvas.height = _canvas.offsetheight; clear canvas browsers don't clear _ctx.clearrect(0, 0, _ctx.canvas.width, _ctx.canvas.height); } /** * mouse input , draw on our canvas * * @param {event} e original event of `.mousemove()` * @param {socket} socket socket.io socket, can emit drawing data */ function draw(e, socket) { // seems layerx non-standard. should use else. // see more: https://developer.mozilla.org/en-us/docs/web/api/uievent/layerx var cx = e.layerx - _canvas.offsetleft; var cy = e.layery - _canvas.offsettop; _ctx.strokestyle = _color; _ctx.linewidth = _thickness; _ctx.linejoin = "round"; _ctx.linecap = "round"; _ctx.lineto(cx, cy); _ctx.stroke(); socket.emit(socketevents.draw, { x: cx, y: cy, color: _color, thickness: _thickness }); } /** * drawing data socket , * draw on our canvas whatever other person draws * * @param {object} data drawing data */ function socketdraw(data) { _ctx.strokestyle = data.color; _ctx.linewidth = data.thickness; _ctx.lineto(data.x, data.y); _ctx.linejoin = "round"; _ctx.linecap = "round"; _ctx.stroke(); } /** * save our canvas drawing image file. * using method allows have custom * name file download * * source: http://stackoverflow.com/a/18480879 * * @param {string} filename name of image file */ whiteboard.prototype.download = function(filename) { var lnk = document.createelement("a"); var e; lnk.download = filename; lnk.href = _canvas.todataurl(); if (document.createevent) { e = document.createevent("mouseevents"); e.initmouseevent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); lnk.dispatchevent(e); } else if (lnk.fireevent) { lnk.fireevent("onclick"); } }; /** * increase thickness * * @param {number} step amount of increase * (e.g. `.increasethickness(1)` * increase thickness 1 pixel) */ whiteboard.prototype.increasethickness = function(step) { _thickness += step; if (_thickness > thickness_max) { _thickness = thickness_max; } }; /** * decrease thickness * * @param {number} step amount of decrease * (e.g. `.decreasethickness(1)` * decrease thickness 1 pixel) */ whiteboard.prototype.decreasethickness = function(step) { _thickness -= step; if (_thickness < thickness_min) { _thickness = thickness_min; } }; object.defineproperty(whiteboard.prototype, "color", { set: function(newvalue) { _color = newvalue; }, get: function() { return _color; } }); object.defineproperty(whiteboard.prototype, "thickness", { set: function(newvalue) { _thickness = newvalue; }, get: function() { return _thickness; } }); return whiteboard; })(jquery, window); below working server.js
var express = require("express"); var app = express(); var http = require("http").server(app); var io = require("socket.io")(http); app.use("/js", express.static(__dirname + "/js")); app.get("/", function(req, res) { res.sendfile(__dirname + "/index.html"); }); io.on("connection", function(socket) { // @ point client has connected socket.on("draw", function(data) { socket.broadcast.emit("draw", data); }); socket.on("draw begin path", function() { socket.broadcast.emit("draw begin path"); }); }); http.listen(3000, function() { console.log("listening on port 3000"); }); thanks
Comments
Post a Comment