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?