Develop Reference

How to select existing fabric canvas

I am trying to select the existing fabric canvas. I tried following code but did not work.
canvas=document.getElementById("imageCanvas").fabric;
Actually i am working with multiple canvas object of fabric. Please suggest way to select switch between multiple canvas and adding text to mutiple canvas based on selection. I also tried following code but it will not work for me because i am createing canvas object dynamically.
http://jsfiddle.net/fpHaE/19/

I have updated the JS fiddle code you can use that code for maintaining the multiple canvases easily .
http://jsfiddle.net/upardhi/fpHaE/24/
var activeCanvas, canvas1, canvas2;
var canvasList={}; /* Variable for maintaining the list of canvases*/
$(document).ready(function() {
canvasList['canvas1'] = new fabric.Canvas('canvas1');
canvasList['canvas2'] = new fabric.Canvas('canvas2');
changeView('canvas1');
});
function changeView(value) {
$('.canvas-container').css('display', 'none');
$('#'+value).parent().css('display', 'block');
activeCanvas=canvasList[value]
}
function dropText() {
var text = new fabric.Text('test');
activeCanvas.add(text);
}
#canvas1{border:1px solid red;}
#canvas2{border:1px solid green;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.13/fabric.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="changeView('canvas1');">View 1</button>
<button onclick="changeView('canvas2');">View 2</button>
<button onclick="dropText();">Drop Text</button>
<div style="text-align: center">
<canvas id="canvas1" class="canvas-area"></canvas>
<canvas id="canvas2" class="canvas-area"></canvas>
</div>

How to set the cursor in EaselJS, with mouseover enabled?

How can I set the cursor for a canvas when using EaselJS?
After a lot of debugging, I managed to figure out the problematic code: stage.enableMouseOver(). I am using stage.enableMouseOver() because I need to be able to mouse over various elements placed on the stage. However, I've found that subsequently trying to set the cursor for the canvas fails to do anything. stage.canvas.style.cursor = "text" does nothing, as well as stage.cursor = "text". However, stage.canvas.style.cursor works when stage.enableMouseOver() is commented out.
This doesn't work:
var stage = new createjs.Stage("canvas");
stage.enableMouseOver(); // comment out this line to get it to work
$("button").click(function() {
stage.canvas.style.cursor = "text";
});
<script src="https://code.createjs.com/easeljs-0.8.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="change-cursor">
Use text cursor instead of default
</button>
<br>
<canvas id="canvas" width=100 height=100 style="background-color:whitesmoke"></canvas>
How can I get my chosen cursor to appear, without removing stage.enableMouseOver()?
Example that does work, but comments out stage.enableMouseOver():
var stage = new createjs.Stage("canvas");
// stage.enableMouseOver();
$("button").click(function() {
stage.canvas.style.cursor = "text";
});
<script src="https://code.createjs.com/easeljs-0.8.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="change-cursor">
Use text cursor instead of default
</button>
<br>
<canvas id="canvas" width=100 height=100 style="background-color:whitesmoke"></canvas>

For those which are working with Animate CC, set the cursor before you enable mouse over:
stage.cursor="pointer";
stage.enableMouseOver(20);

There is a cursorproperty available in EaselJS, check the example below:
var stage = new createjs.Stage("canvas");
stage.cursor = 'text';
var bgShape = new createjs.Shape();
bgShape.graphics.beginFill("red").drawRect(0, 0, 100, 100);
stage.addChild(bgShape);
stage.enableMouseOver();
#canvas {
cursor: text;
}
<script src="https://code.createjs.com/easeljs-0.8.1.min.js"></script>
<canvas id="canvas" width=100 height=100 style="background-color:whitesmoke"></canvas>

HTML Image with vector overlay that allows zooming and panning with the image

Here's a jsfiddle that gives an example of some problems I'm having : http://jsfiddle.net/8LRKW/
In this example, if my rectangle's z-index is negative and the image is upper-most, I can double-click the image and it'll zoom and pan, but if I click my button to make the rectangle upper-most, I can no longer zoom/pan the image - how can I zoom/pan while the canvas is on top ?
Additionally, how do I make the canvas zoom/pan in sync with the image being zoomed/panned?
Also, as a side-note, one problem I've also noticed is that my rectangle initially is hidden and will only appear when canvas gets a mouse-over. What's going on here, and how do I fix that?
<div style="position:absolute;left:0px;top:0px;" id="village">
<p>
<img src="http://www.consulenza-web.com/jquery/touchpanview/simpson.jpeg" alt="simpson" width="1920" height="1200" />
</p>
</div>
<canvas style="position:absolute;left:0px;top:0px;z-index:999;" id="myCanvas" resize></canvas>
<input style="position:absolute;left:0px;top:350px;z-index:9999;" type="button" value="Toggle Shape z-Index" onclick="$('#myCanvas').css('z-index',$('#myCanvas').css('z-index') * -1);" />
var canvas = document.getElementById('myCanvas');
paper.setup(canvas);
var rectangle = new paper.Rectangle(new paper.Point(50, 50), new paper.Point(150, 100));
var path = new paper.Path.Rectangle(rectangle);
path.fillColor = '#e9e9ff';
$('#village img').touchPanView({
width: 600,
height: 300,
startZoomedOut: true
});

Add pointer-events: none to the style. This fixes it in Firefox and will fix it in other UIs that implement pointer-events.
<canvas style="position:absolute;left:0px;top:0px;z-index:999;pointer-events:none" id="myCanvas" resize></canvas>

canvas drawImage of a div

I am trying to draw an image on to a canvas. My source is a div that has a collection of text and images. Is this possible to do? I have tried to put some code together but it failed as the canvas is empty.
Div
<div id="puzzle">
Some text
<img src="sky" />
text text
<img src="sun.png />
</div>
code
<canvas id="mycanvas" width="300" height="150"></canvas>
var canvas = document.getElementById("mycanvas");
var ctx = ccanvas.getContext("2d");
var img = document.getElementById("puzzle");
img.onload = function(){
ctx.drawImage(img,0,0,40,40);
}

Change
ccanvas.getContext("2d");
to
canvas.getContext("2d");
Otherwise, this seems to be what you're looking for: Can you take a "screenshot" of the page using Canvas?
More specifically: http://html2canvas.hertzen.com/

write id=puzzle inside img tag

Controlling the text size in the canvas (textarea)

I want to create a canvas that displays text from textarea.
I have a problem with controlling the size of the text in textarea.
In other words, I want the user to choose the size of the text then write it in the text area which in turn will be displayed on the canvas once the button is clicked.
I tried this code but there is a problem i do not what is it.
Here is a sample of the code:
<script>
var y = 30;
function pasteText()
{
Text=document.getElementById('textarea').value;
var x = 30;
var lineheight = 15;
var lines = Text.split('\n');
$("#clr2 font").click(function (){
context.fillStyle=$(this).css("color");
});
$("#clr3 font").click(function (){
context.font=$(this).css("font-size")+ "Arial";
});
for (var i = 0; i<lines.length; i++)
context.fillText(lines[i], x, y + (i*lineheight) );
y+=38;
}
</script>
<body>
<canvas class="canvas" id="canvas" width="600" height="200" style="border:1px solid"> </canvas>
<font id="clr3">
<font style="font-size:9pt;"> Small</font>
<font style="font-size:16pt;"> Medium</font>
<font style="font-size:24pt;"> Large</font>
</font>
<textarea name="textarea" cols="72" rows="6" id="textarea" value="Type the text here" ></textarea>
<input type="button" name="paste" value="Paste on the canvas" onClick="pasteText()"/>
<script type="text/javascript">
var container = layer2.parentNode;
canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
</script>
</body>

I am sure that the problem is in context.font
because context.font accepts the size and the family of the font.
I am not sure if what I wrote in my code is the correct syntax
context.font=$(this).css("font-size")+ "Arial";

You have quite a lot of problems in your code, some that pop immediately:
The for loop code in not enclosed in braces { }
The click handlers are defined inside the pasteText function and thus will only be registered after the user clicked the paste text button.
the <font> tags are not standart tags and some browsers, especially IE won't like it.
update:
Is it possible that what's missing is a space between the font size and the font face? try to add a space before the Arial:
context.font=$(this).css("font-size")+ " Arial";