Giving a canvas a class

Question

I need to give the canvas I have initiated a class but am not sure how to do this. Apologises if this is a silly question I have wrecked my head over this.

Any help would be greatly appreciated,

Melissa

 function initCanvas(id) {
    stage = new Kinetic.Stage({
    container: id,
    width: 850,
    height: 500

    });
    layer = new Kinetic.Layer();
    stage.add(layer);
    stage.draw();
  }

Answer 1

Each time you create a new Kinetic.Layer, you are creating a new canvas "class" (a new canvas).

A Kinetic.Stage is a collection of Kinetic.Layers (canvases) that are all positioned directly on top of the Stage.

So this creates a Stage container:

stage = new Kinetic.Stage({
    container: id,
    width: 850,
    height: 500
});

And this creates 1 new Layer on that Stage (1 new canvas on top of that Stage)

layerBottom = new Kinetic.Layer();
stage.add(layerBottom);

• A new layer is always exactly the same size as its parent Stage.
• A new layer is always positioned directly on top of its parent Stage.

This code creates a second layer on that Stage (another canvas on top of that Stage)

layerTop = new Kinetic.Layer();
stage.add(layerTop);

• layerTop is always exactly the same size as its parent Stage.
• layerTop is always positioned directly on top of its parent Stage.
• layerTop is positioned on top of layerBottom

You can draw Kinetic shapes on both layerBottom and layerTop.

The 2 layers are truly "layered".

If draw a Kinetic.Rect on layerBottom and also on layerTop at the same x/y, the layerTop Rect will hide the layerBottom Rect, but both Rects are still there.

var rectBottom=new Kinetic.Rect({
    x:20,
    y:20,
    width:50,
    height:50,
    fill:"red"
});
layerBottom.add(rectBottom);

var rectTop=new Kinetic.Rect({
    x:20,
    y:20,
    width:50,
    height:50,
    fill:"red"
});
layerTop.add(rectTop);

Answer 2

Take a look at this example http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-bounds-tutorial-with-kineticjs/ to get a clear idea about how stages and layers work