JoshG
JoshG

Reputation: 6735

How can I add a canvas drawing to a scene in Three.js?

I have a 3D scatter plot that I've constructed using Three.js. I would like to add an HTML5 canvas drawing to the scene, such that the drawing appears on a certain position of the page.

To better explain, here is a fiddle of the scatter plot: http://jsfiddle.net/jmg157/ynFzw/6/

And let's say I wanted to add the below drawing to the bottom left (or right) of the page (which will eventually be a legend for the plot):

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.rect(3, 3, 300, 200);
context.fillStyle = 'white';
context.fill();
context.lineWidth = 3;
context.strokeStyle = 'black';
context.stroke();
context.font = "20px Verdana";
context.fillStyle = "#000";
context.fillText("Legend", 120, 25);

Thank you for any help/suggestions on how to go about doing this.

Upvotes: 0

Views: 983

Answers (1)

WestLangley
WestLangley

Reputation: 104763

Here is a pattern you can follow:

var canvas = document.createElement( 'canvas' );
var context = canvas.getContext('2d');
context.beginPath();
context.rect(3, 3, 150, 100);
context.fillStyle = 'white';
context.fill();
context.lineWidth = 3;
context.strokeStyle = 'black';
context.stroke();
context.font = "20px Verdana";
context.fillStyle = "#000";
context.fillText("Legend", 40, 25);

canvas.style.position = 'absolute';
canvas.style.top =  ( window.innerHeight - 100 - 10 ) + 'px';
canvas.style.left = '10px';
canvas.style.margin = '0px';
canvas.style.padding = '0px';

document.body.appendChild( canvas );

Your fiddle updated: http://jsfiddle.net/ynFzw/7/

Upvotes: 1

Related Questions