Develop Reference

Add a picture in the HTML canvas (jsketcher2D) and keep it on the back

I'm trying to develop a JavaScript application for modulating house plans with jsketcher. You can view project here. For modulating plans, I need to load the plan on the canvas, then try to modulate with the tools present in the jsketcher2D. I've manged to load the plan but couldn't find a way to keep it below the other elements of the canvas. I need the elements which are drawn with jsketcher2D to be on top of the plan image. Could you please help me with this?
Thank you very much
modifications made to static/sketcher.bundle.js
Line 49532
function addPlan(){
let canvas = document.getElementById('viewer');
let plan = canvas.getContext("2d")
let base_image = new Image();
base_image.src = 'img/back.png';
plan.drawImage(base_image, 0, 0);
}
Line 47461
addPlan();

You need to show more code. The most likely reason this is happening is you have your addPlan() function running after you draw on the canvas. The first things drawn will be on the back of the canvas and the last things drawn will be above.
addPlan(); // Background
canvasContext.fillRect(0, 0, 50, 50); // will be on top of image

Clip by mask defined by pixel image or prevent drawing outside of that mask

I'm two days into js,html and css programming. So very newbie!
Following and building upon this TUTORIAL
Q1: How can I add this male into the background (see figuere 1.) and prohibit any strokes outside of the borders?
Adding image to background was no biggy!
function make_base()
{
base_image = new Image();
base_image.src = 'img/bmapFront.gif';
base_image.onload = function(){
context.drawImage(base_image, 0,0);
}
}
There is a context.clip function, not sure if I can use pixel form as clipping path. Making tons of "image substractions" isn't the best way.
Any suggestions
Edit:
Did the Job for me: VeryHelpful
var frontPath = new Path2D ("M 133.41,17.00 C 141.37,2.41 160.66, !VERY LONG! ")
context.clip(frontPath);
Messy strokes!
He should look like this. Then I want to save him.

Although there is such a thing as ctx.clip(), this is sometimes not what's wanted as it's impractical to use a path.
The solution that I like involves creating a virtual empty canvas onto which you draw your pixel image. Through various manipulations, like using ctx.getImageData and similar to make sure you only get one kind of color or apply other filters only once, you can obtain an image that seems to be empty (alpha of 0, mostly) in the places where you want to clip other images or paths out.
At that point, you'd use ctx.globalCompositeOperation = 'source-atop', or pick another one you might want to use from mdn's list of globalCompositeOperations.
At this point, you can just draw this virtual canvas image onto the main canvas

Making sure drawImage draws the image on HTML5 canvas

I am making a multiple choice quiz game for canvas, where users upload their own images for multiple choice answers.
When the next question is selected, the variables for the next question are got from a javascript array, including filepath for the image.
The problem I am having with this is that usually on the first quiz attempt, images sometimes do not load in time to be drawn on the canvas. I am trying to improve the performance of the canvas side of the quiz, by ensuring image answers are always drawn.
Help would be greatly appreciated. The code for drawing images on canvas is below.
//else if answer type is image answer
else if(answertype == "image"){
answerbg.src = "./resources/imageaudiovideoanswerbg.png";
eventstate = 'imageaget';
if (answerbg.complete) {
context.drawImage(answerbg, 0, 280);
context.drawImage(imagefilea,75,285);
context.drawImage(imagefileb,375,285);
context.drawImage(imagefilec,75,591);
context.drawImage(imagefiled,375,591);
}
else {
answerbg.onload = function () {
context.drawImage(answerbg, 0, 280);
context.drawImage(imagefilea,75,285);
context.drawImage(imagefileb,375,285);
context.drawImage(imagefilec,75,591);
context.drawImage(imagefiled,375,591);
};
}
}

You have to make sure that the image is loaded before you can draw it on canvas.
So what you would have to do is somthing like:
var image = new Image(); //make a new image object
image.onload = function() { //when the image has loaded...
doStuffWithImage(); //Do somthing with it (draw it on canvas etc.)
}
image.src = '/your/path/image.png'; //set the source (afterwards!)
This is something you have to know if your working with images and canvas.
Also if you have trouble loading all the images make a preLoadAllImagesfromSource(sourceArray) function, where all the images objects are allready preloaded when the main code is executed.
Hope that helped.

Alternatively you can consider embedding the image and/or other resources using BASE64 encoding in the JavaScript or the HTML itself.
http://ejohn.org/blog/embedding-and-encoding-in-javascript/
Of course in your case since it is a user uploaded content, you may have to generate the JavaScript from the uploaded image.

ThreeJS render text in canvas as texture and then apply to a plane?

I've been looking all day for a way to procedurally generate 2d texture with text in them so that I can apply them as a texture to a plane. Basically, I want to be able to change what text shows up in my WebGL page without having to just use texture made in an image editing program. I'm aiming to be able to edit the content of the page just as easily as with a totally 2d page, just edit the code and bam, it's there.
The most promising method I've seen to accomplish this is to render the text in a blank canvas with CSS, use that canvas as a texture which ThreeJS makes very easy, and then apply that texture to a plane that I can place wherever in the 3d environment.
I've attempted to accomplish this by adapting this example to my needs: http://jsfiddle.net/sSD65/28/
However, I end up with a totally black page, indicating an error somewhere. An error that I cannot, for the life of me, find and fix. I have a feeling I'm missing something because of my lack of experience with ThreeJS and in fact Javascript in general so I've come here to ask for your help.
I really appreciate any help I can get here.
Here's a link to the page, although I don't think you will be able to view it properly without hosting it locally since I'm loading an image from a folder there, but Python is wonderful for that. Just use Python -m SimpleHTTPServer in the console once you've navigated to that folder and it will host it locally so that you can access it from "http://localhost:8000/homepage.html": https://dl.dropbox.com/u/40043006/WebGLTest.zip

This is a simple code to add text from a canvas as a texture:
//create image
var bitmap = document.createElement('canvas');
var g = bitmap.getContext('2d');
bitmap.width = 100;
bitmap.height = 100;
g.font = 'Bold 20px Arial';
g.fillStyle = 'white';
g.fillText(text, 0, 20);
g.strokeStyle = 'black';
g.strokeText(text, 0, 20);
// canvas contents will be used for a texture
var texture = new THREE.Texture(bitmap)
texture.needsUpdate = true;
it needs some work... like setting the output text size to the canvas' size.

color to grey scale conversion in canvas

I am trying out a sample code that converts a color image to grey scale on a canvas in WebOS (enyo). When I use the ctx.getImageData method to read the pixels, the imageData contains only zeros. The sample I am using is provided in the link below:
http://chopapp.com/#x8t2ymad
Does WebOS support reading pixel data from canvas? Am I doing something wrong here?
I have refered to the following link for the logic and the code:
http://net.tutsplus.com/tutorials/javascript-ajax/how-to-transition-an-image-from-bw-to-color-with-canvas/
This works fine.

you should move the getimagedata in the callback from the onload event of the image.
something like:
draw: function(image) {
this.ctx.drawImage(event.target, 0, 0);
this.greyImage();
},
and set the source after binding the event
image.onload = enyo.bind(this, "draw");
image.src = "images/image.png";
to avoid a racing condition
now the imagedata is retrieved before the actual pixels are loaded. Which results in an empty array.