Geek asks and answers

canvas.getContext () is not a function

I am currently doing research on how to combine Coldfusion with Canvas. I'm currently stuck due to JavaScript error "canvas.getContext ('2d'); this is not a function."

The canvas should be inside the 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);

Additional information about the project (if necessary):

  • The following libraries: 1.7.2/jquery.min.js, jquery.svg.js, base64.jsandcanvas2image.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>

+8
source share
3 answers

You must refer to the element <canvas.....> </canvas>, not to <div>, etc.!

+24
source

Try:

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

canvasEl - <canvas id="canvasEl"></canvas>. $('#svgbasics').svg('get').toSVG();, , canvas HTML, .getContext('2d').

+13

You confuse the SVG canvas with the new HTML5 canvas.

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

From the script tags, I see that 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 and using SVG Canvas: http://keith-wood.name/svg.html .

+4
source

More articles:


All Articles