CODEWITHSUNDEEP
javascriptcanvas
adrian
adrian

Reputation: 129

canvas.getContext() is not a function

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):

Upvotes: 12

Views: 51134

Answers (3)

T.Todua
T.Todua

Reputation: 56555

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

Upvotes: 31

Philip Tenn
Philip Tenn

Reputation: 6083

You are confusing SVG canvas with the new HTML5 Canvas.

They are different animals. Please take a look at this article for the differences between Canvas and SVG (there is a "Differences between Canvas and SVG" section): http://www.w3schools.com/html/html5_svg.asp

From your script tags, I can see you are using jQuery SVG:

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 <script type="text/javascript" src="jquery.svg.js"></script>

This page shows an example of using getting and manipulating the SVG Canvas: http://keith-wood.name/svg.html.

Upvotes: 5

Darko
Darko

Reputation: 38910

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.

Upvotes: 16

Related Questions