dynamically create canvas elements

Question

I'm trying my hand at creating a tool for users to upload and annotate an image, then save to database. The tool allows drawing lines, adding text and erasing. Now when it comes to adding text,an svg sulution might be better, but haven't found one that dynamically loads a background image.

Anyway, users need to be able to add multiple pieces of text and move them on the image. For this to happen I neede to be able to create layer for the text pieces dynamically, i.e. when the text button is clicked and the text field has some text in it.

At the moment, the text gets added ontop of the canvas in the same position. How can I loop the creation of layers, say in this function:

function draw_text() {
ctx.fillStyle = "blue";
ctx.font = "12pt Helvetica";
ctx.fillText($('#text_entry').val(), 10, 250);
}

Hi, that's not an answer, but your project seems to be like [http://web-projects.gr/myquotefive/#.UUbmNhyQXww](My Quote Five). May be you could contact the author [http://walkero.gr/](Walkero) to know how he did — Gwennael Buchet, Mar 18 '13 at 10:10
Hey that's exactly what I'm try to do...thanks for the link! — IlludiumPu36, Mar 19 '13 at 01:08
you're welcome. In the "info" tab, you can see he used [cgSceneGraph](http://gwennaelbuchet.github.com/cgSceneGraph/) as framework to achieve the application. — Gwennael Buchet, Mar 19 '13 at 07:12

Jarrod · Answer 1 · 2013-03-19T03:16:11.417

2

I'm not 100% sure what you're asking but I'll give an answer based on your title dynamically create canvas elements.

This is a function I use to create new canvases. Change it to suit your needs.

To use it:

var myCanvas = createLayer(500, 500);
var myContext = myCanvas.getContext('2d');

Function

function createLayer (w, h) {

    var canvas = document.createElement('canvas');

    canvas.width = w;
    canvas.height = h;
    canvas.style.width = w + "px";
    canvas.style.height = h + "px";
    canvas.style.position = "absolute";

    var body = document.getElementsByTagName("body")[0];
    body.appendChild(canvas);

    return canvas;
},

You can then also store the context in an array too allow you to loop through each layer.

edited Mar 19 '13 at 03:16

answered Mar 18 '13 at 19:23

Jarrod

9,349
5
58
73

Thanks. So how would I assign id and zIndex dynamically? – IlludiumPu36 Mar 19 '13 at 02:44
You don't actually need those. They were included really just to add some features. Anyway, I've removed them to give you a bare bones example and remove confusion. – Jarrod Mar 19 '13 at 03:17

score 1 · Answer 2 · answered Mar 18 '13 at 10:22

You can create a Layer object who will have is own draw_text(). All Layers object are push in an array, you goes through to call all render method.

Layer object :

function Layer(_posX, _posY, _text, _context, _font, _color){
    this.posX = _posX;
    this.poxY = _posY;
    this.text = _text;
    this.ctx = _context; //canvas context
    this.font = _font;   //String
    this.color = _color; //String "rgb(255, 255, 255)" or "#FFFFFF"

    this.draw_text = function(){
       this.ctx.fillStyle = this.color;
       this.ctx.font = this.font;
       this.ctx.fillText(this.text, this.posX, this.posY);
}

Render :

RenderPile = [];
for(elt in RenderPile){
   elt.draw_text();
}

Ask questions if I'm not clear.

elt is just an instance var for the loop it's more explain here :[link]http://stackoverflow.com/questions/500504/javascript-for-in-with-arrays[/link] — Prox, Mar 19 '13 at 09:43

score 0 · Accepted Answer · answered Mar 21 '13 at 06:36

0

Thanks for you suggestions with this. I decided to implement canvas.js and it's worked out perfectly. Very easy to implement.

Canvas

answered Mar 21 '13 at 06:36

IlludiumPu36

4,196
10
61
100

dynamically create canvas elements

3 Answers3