Looking for help with ROJOHOUND CANVAS PLUGIN.
I came across a website that features various HTML5 CANVAS and SVG CANVAS experiments.
One project 'SVG to HTML5 Canvas Converter' lets you convert SVG TO Html5 canvasJavaScript function.
professorcloud.com/svg-to-canvas
----------------------------------------------------
I created the following image with SVG-edit-
<img src="https://dl.dropbox.com/u/22173473/rounded%20rectangle.png" border="0" />
The SVG code for this is-
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg">
<!-- Created with SVG-edit - svg-edit.googlecode.com -->
<g>
<title>Layer 1</title>
<rect ry="20" rx="20" id="svg_1" height="122" width="124" y="3.5" x="2" stroke-width="5" stroke="#000000" fill="#FF0000"/>
</g>
</svg>
----------------------------------------------------
After using the coverter-
The HTML5 Canvas JavaScript function is-
var draw = function(ctx) {
ctx.save();
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(128,0);
ctx.lineTo(128,128);
ctx.lineTo(0,128);
ctx.closePath();
ctx.clip();
ctx.strokeStyle = 'rgba(0,0,0,0)';
ctx.lineCap = 'butt';
ctx.lineJoin = 'miter';
ctx.miterLimit = 4;
ctx.save();
ctx.save();
ctx.restore();
ctx.save();
ctx.fillStyle = "#ff0000";
ctx.strokeStyle = "#000000";
ctx.lineWidth = 5;
ctx.beginPath();
ctx.moveTo(22,3.5);
ctx.lineTo(106,3.5);
ctx.quadraticCurveTo(126,3.5,126,23.5);
ctx.lineTo(126,105.5);
ctx.quadraticCurveTo(126,125.5,106,125.5);
ctx.lineTo(22,125.5);
ctx.quadraticCurveTo(2,125.5,2,105.5);
ctx.lineTo(2,23.5);
ctx.quadraticCurveTo(2,3.5,22,3.5);
ctx.closePath();
ctx.fill();
ctx.stroke();
ctx.restore();
ctx.restore();
ctx.restore();
};
-----------------------------------------------
Rojohound...Any chance you could post a example of the above code converted into a workable set of events for your canvas plugin?
Thanks in advance.