jquery - jCanvas's clearCanvas does not seem to work with layers -
i've organized jcanvas code render method fires on window.resize:
<script type="text/javascript"> var middlex; var middley; var canvas; var ctx; var isloaded = false; $(document).ready ( function () { init(); isloaded = true; render(); $("canvas").fadein(2000); } ); function scaletowindowdimensions() { ctx.canvas.width = window.innerwidth; ctx.canvas.height = window.innerheight; middlex = $canvas.width() / 2; middley = $canvas.height() / 2; } function init() { $canvas = $('canvas'); ctx = document.getelementbyid("canvas").getcontext("2d"); scaletowindowdimensions(); } $(window).resize ( function () { scaletowindowdimensions(); render(); } ); function render() { if (!isloaded) { return; } $canvas.clearcanvas(); // ctx.clearrect(0, 0, $canvas.width(), $canvas.height()); $canvas.addlayer({ method: 'drawarc', strokestyle: "#000", strokewidth: 1, fillstyle: '#c33', x: middlex, y: middley, closed: true, radius: 50, // event bindings mousedown: function (target) { alert('you pushed red!'); }, mouseup: function (target) { target.fillstyle = '#c33'; }, mouseover: function (target) { target.fillstyle = "#888"; }, mouseout: function (target) { target.fillstyle = "#c33"; } }); $canvas.addlayer({ method: "drawtext", strokestyle: "#000", fromcenter: true, strokewidth: 1, fillstyle: "#333", fontsize: "18pt", fontfamily: "verdana", x: middlex, y: middley, text: "man", data: { "id": 1, "word": "man" }, mousedown: function (target) { alert($(this).id); } }); $canvas.addlayer({ method: 'drawarc', strokestyle: "#000", strokewidth: 1, fillstyle: '#d88', x: 500, y: 100, closed: true, radius: 40, // event bindings mousedown: function (target) { alert('you pushed red!'); target.fillstyle = '#333'; }, mouseup: function (target) { target.fillstyle = '#d88'; }, mouseover: function (target) { target.fillstyle = "#888"; }, mouseout: function (target) { target.fillstyle = "#d88"; } }); $canvas.addlayer({ method: "drawtext", strokestyle: "#000", fromcenter: true, strokewidth: 1, fillstyle: "#333", fontsize: "16pt", fontfamily: "verdana", x: 500, y: 100, text: "men", data: { "id": 2, "word": "men" }, mousedown: function (target) { alert($(this).id); } }); $canvas.addlayer({ method: 'drawline', strokestyle: "#222", strokewidth: 1, x1: middlex, y1: middley, x2: 500, y2: 100, radius: 40, }); $canvas.drawlayers(); } </script> this draws image:
the intent first step when render called clear entire canvas:
$canvas.clearcanvas(); // ctx.clearrect(0, 0, $canvas.width(), $canvas.height()); these 2 separate attempts clear canvas, neither of works. without canvas being cleared, result this:
i have general idea has layers rather drawing directly, i'm baffled why canvas not being cleared...
tia.
clearcanvas working intended, issue here adding 5 layers $canvas on each call render. so, when drawlayers called, layers added $canvas drawn; 5 updated ones along layers added in previous render calls.
one way solve issue alter layers in render method setlayer, , add them in method called once, possibly init.
so, init becomes:
function init() { $canvas = $('canvas'); ctx = document.getelementbyid("canvas").getcontext("2d"); scaletowindowdimensions(); console.log($canvas); //adding layers in init //and defining //static properties //won't change on each render $canvas.addlayer({ name: "l0", //unique name access visible: true, method: 'drawarc', strokestyle: "#000", strokewidth: 1, fillstyle: '#c33', x: middlex, y: middley, closed: true, radius: 50, // event bindings mousedown: function (target) { alert('you pushed red!'); }, mouseup: function (target) { target.fillstyle = '#c33'; }, mouseover: function (target) { target.fillstyle = "#888"; }, mouseout: function (target) { target.fillstyle = "#c33"; } }) .addlayer({ name: "l1", //unique name access visible: true, method: "drawtext", strokestyle: "#000", fromcenter: true, strokewidth: 1, fillstyle: "#333", fontsize: "18pt", fontfamily: "verdana", x: middlex, y: middley, text: "man", data: { "id": 1, "word": "man" }, mousedown: function (target) { alert($(this).id); } }) .addlayer({ name: "l2", //unique name access visible: true, method: 'drawarc', strokestyle: "#000", strokewidth: 1, fillstyle: '#d88', x: 500, y: 100, closed: true, radius: 40, // event bindings mousedown: function (target) { alert('you pushed red!'); target.fillstyle = '#333'; }, mouseup: function (target) { target.fillstyle = '#d88'; }, mouseover: function (target) { target.fillstyle = "#888"; }, mouseout: function (target) { target.fillstyle = "#d88"; } }) .addlayer({ name: "l3", //unique name access visible: true, method: "drawtext", strokestyle: "#000", fromcenter: true, strokewidth: 1, fillstyle: "#333", fontsize: "16pt", fontfamily: "verdana", x: 500, y: 100, text: "men", data: { "id": 2, "word": "men" }, mousedown: function (target) { alert($(this).id); } }) .addlayer({ name: "l4", //unique name access visible: true, method: 'drawline', strokestyle: "#222", strokewidth: 1, x1: middlex, y1: middley, x2: 500, y2: 100, radius: 40, }); } and render becomes:
function render() { if (!isloaded) { return; } $canvas.clearcanvas(); // ctx.clearrect(0, 0, $canvas.width(), $canvas.height()); //here, use setlayer change //properties supposed change //with render //we use unique name of each layer //set in init access them. $canvas.setlayer("l0", { x: middlex, y: middley, }); $canvas.setlayer("l1", { x: middlex, y: middley }); //layer l2 , l3 don't //change anything, //not changed render. $canvas.setlayer("l4", { x1: middlex, y1: middley }); $canvas.drawlayers(); }
Comments
Post a Comment