canvas.getContext is not a function, when called on canvas

Question

I am encountering an error where getContext cannot be called even though the element is a canvas.

var canvas = document.getElementById(id);
console.log(canvas, canvas.nodeName);
var ctx = canvas.getContext('2d');

Thanks!

Snippet of it working in isolation, but not in the script

var canvas = document.getElementById( '0_0' );
document.write(canvas.getContext('2d'));

<g class="node" transform="translate(210,330)">
  <canvas x="-8" y="-8" id="0_0"></canvas>
</g>

<canvas x=​"-8" y=​"-8" id=​"0_0">​ "canvas"
Uncaught TypeError: canvas.getContext is not a function
  at Array.populateNodes (script.js:95)
  at Array.Co.call (d3.v3.min.js:3)
  at gen_graph (script.js:63)
  at Object.success (main.js:16)
  at i (jquery.min.js:2)
  at Object.fireWith [as resolveWith] (jquery.min.js:2)
  at A (jquery.min.js:4)
  at XMLHttpRequest.<anonymous> (jquery.min.js:4)

The js, using d3:

Apologies for how bad my JS may or not be, I am quite new to it

Answer 1

I think the "canvas" element is treated as unknown "canvas" element of SVG by d3. So the "canvas" element is not mapped to HTMLCanvasElement but SVGUnknownElement in domtree of document, thus getContext() of SVGUnknownElement is undefined.

To solve this problem, you should wrap the "canvas" element by foreignObject element and add xhtml namespace to the "canvas" element.

I'm not good at d3, please try to construct this structure by using d3.

<g class="node" transform="translate(210,330)">
  <foreignObject x="-8" y="-8">
    <canvas id="0_0" xmlns="http://www.w3.org/1999/xhtml"></canvas>
  </foreignObject>
</g>

Or use image element instead of "canvas" element to put image created by (html)canvas element.

SVG structure

<g class="node" transform="translate(210,330)">
  <image x="-8" y="-8" id="0_0"/>
</g>

Javascript code

//create canvas element.
//var canvas = document.getElementById(nodes[i].__data__.name);
var canvas = document.createElement("canvas");
//console.log(canvas, canvas.nodeName);
var ctx = canvas.getContext('2d');

canvas.width = width;
canvas.height = height;

var idata = ctx.createImageData(width, height);
idata.data.set(buffer);
ctx.putImageData(idata, 0, 0);

//set image created by canvas to image element.
var image = document.getElementById(nodes[i].__data__.name);
image.width.baseVal.value = width;
image.height.baseVal.value = height;
image.href.baseVal = canvas.toDataURL();

Answer 2

With D3.js it's crucial to create the canvas element within the proper namespace by using .create('xhtml:canvas') or .append('xhtml:canvas'). The xmlns attribute is nice to have, but will be disregarded by most modern HTML5 browsers.

Here's a full D3.js example:

const svg = d3.select('body').append('svg')
  .style('width', '100%')
  .style('height', '100%');

const group = svg.append('g')
  .attr('class', 'node')
  .attr('transform', 'translate(10,10)');

const foreignObject = group.append('foreignObject')
  .attr('width', 100)
  .attr('height', 100);

const canvas = foreignObject.append('xhtml:canvas')
  .attr('xmlns', 'http://www.w3.org/1999/xhtml');

const context = canvas.node().getContext('2d');

console.log(canvas.node().constructor.name);
// => HTMLCanvasElement

// Draw something
context.fillStyle = 'blue';
context.fillRect(0, 0, 100, 100);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

The concept of namespaces it not easy to grasp and most time you won't need to explicitly set them, since they are inherited from the parent element. Mike Bostock explains the concept quite well in this Github issue.

(Yeah, I open the issue and it didn't know how to use namespaces either.)