How would I go about having an editable file to transform an object on a webpage?

Question

I have some code that creates objects on a webpage by using draw on HTML5 canvas.

In my aspx file I have functions like:

function drawLine(x, y, w, h, width) {
 var canvas = document.getElementById('cpMainContent_myCanvas');
 var ctx = canvas.getContext('2d');
 ctx.moveTo(x, y);
 ctx.lineTo(x + w, y + h);
 ctx.lineWidth = width;
 ctx.stroke();
}
function drawShape(x, y, listOfPoints, fill, width, colour) {
 var canvas = document.getElementById('cpMainContent_myCanvas');
 var ctx = canvas.getContext('2d');
 ctx.beginPath();
 ctx.moveTo(x, y);
 for (var i = 0; i < listOfPoints.length; i++) {
 ctx.lineTo(listOfPoints[i][0], listOfPoints[i][1]);
 };
 ctx.fillStyle = fill;
 ctx.fill();
 ctx.closePath();
 ctx.lineWidth = width;
 ctx.strokeStyle = colour;
 ctx.stroke();
}
etc...

On the server side I generate a string 's' which forms my script and then I call it by using:

ClientScript.RegisterStartupScript(GetType(), "Test", s.ToString(), true);

When the page is displayed it produces something like:

<script type="text/javascript">
//<![CDATA[
function Test(){drawLine(680,409.5,19,0,1);drawSemiCircle(699,409.5,8,0);drawRectangle(700,422.5,68,-26,'#000000',1,'#FFFFFF');drawText('K1D',703,415.5,'14pt Arial Narrow');}Test();//]]>
</script>

And I get a web page displaying line drawings depicting certain objects.

My question is, is it possible to have an external file to describe how these objects are created? I have only had a brief look at XSLT and I can't seem to find if it can support bespoke line drawings.

I would like the ability to have a file for each object type, then in the file define what it is made of. E.g. in the file I can declare: drawLine(x,y,19,0,1); drawSemiCircle(x + 19, y,8,0);

Or something similar.

I think I need to use SVG. The reason I used HTML5 canvas was because I thought this was the latest technology and would do pretty much what SVG does. But it seems to use XSL to create a line drawing on my web page, I would need to use SVG. Am I interpreting this correctly?

Answer 1

You use JavaScript to draw in a canvas. You use declarative XML-markup to create SVG. So if you want to use XSLT, SVG is the only sane choice here.

Some background:

Canvas and SVG are are two completely different approaches to creating dynamic graphics for the web.

The HTML5 canvas element is for drawing bitmap graphics like sprites, games, textures. SVG is for creating vector graphics like charts. Vector graphics can be transformed (scaled/zoomed/rotated) without loosing definition, whereas bitmap images cannot.

• Family: Excellent, thanks Martin. I maybe should have asked this question sooner as I have created all my objects in HTML5. Still, nothing is wasted time when I'm learning. Thanks for the help.