Reputation: 6735
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
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