canvas.getContext() is not a function

Question

Currently am doing research on how to interate Coldfusion with Canvas. At the moment, i'm stuck due to javascript error "canvas.getContext('2d'); is not a function".

The canvas has to be located inside a div:

<div id="svgbasics" name="svgbasics"></div>

This is the javascript used to generate the image

var canvas = $('#svgbasics').svg('get').toSVG();
var context = canvas.getContext('2d');
var strDataURI = canvas.toDataURL();
Canvas2Image.saveAsPNG(canvas);

---

Project's additional info (if needed):

• the following libraries are used: 1.7.2/jquery.min.js, jquery.svg.js, base64.js and canvas2image.js

• $('#svgbasics').svg('get').toSVG(); returns something like this:

  <svg xmlns="w3.org/2000/svg"; version="1.1" width="400" height="300"><circle cx="75" cy="75" r="50" fill="none" stroke="red" stroke-width="3"/><g stroke="black" stroke-width="2"><line x1="15" y1="75" x2="135" y2="75"/><line x1="75" y1="15" x2="75" y2="135"/></g></svg>

Answer 1

Try:

var canvas = document.getElementById("canvasEl");
var context = canvas.getContext('2d');

Where canvasEl is a <canvas id="canvasEl"></canvas>. Your $('#svgbasics').svg('get').toSVG(); probably doesn't return an HTML canvas element which it must for the .getContext('2d') to exist.

Answer 2

You should refer to <canvas .....> </canvas> element, not <div> or etc !