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>
Related
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>
Fiddle: https://jsfiddle.net/6e6nwkpv/
I want to make the hidden canvas show, and the footer hidden when I click the button 'No.' But somehow they end up both disappearing.
Bonus: how does one make java words on html canvas appear(and disappear) in a time sequence?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<body>
<div id="canvas" style="display: block;">
<canvas id="myCanvas" height="300" width="500"></canvas>
</div>
<div id="buttons">
<button class="clickBoo" style="margin-top: 40px;">No</button>
</div>
<footer class="change">
Revised June 7th
</footer>
</body>
$(document).ready(function() {
$(function() {
var canvas = document.getElementById("myCanvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.font="30px Helvetica";
ctx.fillStyle = "white";
ctx.fillText ('Boo!',400,50);
ctx.fillText ('Boo!',10,200);
ctx.fillText ('Tea?',300,200);
ctx.fillText ('No?',200,400);
ctx.fillText ('Sorry if I scared you.',20,40);
}
});
$(".clickBoo").click(function() {
$(".change").toggle("changed");
$("#myCanvas").toggle("show");
});
});
There are several issues with this code.
As #Jackson suggest, you have used wrong jquery function toggle() instead of toggleClass().
Secondly, your footer has margin-top property set to -700px which cause this element to disappear since your canvas and "No" button in summary have about 400px height. So your footer is rendered about 300px above the screen.
By default your canvas is shown but it is rendered with empty content. So applying show class to your canvas does nothing.
I am new to this site and this is first question I am asking here..if its simple pls forgive me..
I have drawn one background image, on this I am drawing 5 small small images by using drawImage() method. Once I touch the small images then they should disappear or should pop up one alert box but ontouch event is not occurring so far I have searched for ontouch event but no use. I dont want to draw images through img tag in HTML.
Here is my code segment
var car = new Image();
car.src = "img/car.jpg";
car.onload = function() {
imgLoaded = true;
}
if (imgLoaded = true) {
drawBackgroundImg();
drawCarImg();
}
function drawCarImg() {
if (i == 0) {
x1 = Math.floor((Math.random() * 501));
y1 = Math.floor((Math.random() * 301));
cxt.save();
cxt.drawImage(car, x1, y1, car.width, car.height);
cxt.restore();
}
}
car.on('touchstart', function() {
alert("T");
});
Here is my HTML code
<!DOCTYPE html>
<body>
<div id="container" onclick="void(0)">
<canvas id="can"> </canvas>
</div>
<div id="btn">
<input type="image" id="zoomIn" src="img/up.png" onclick="zoomIn()" />
<input type="image" id="zoomOut" src="img/down.png"
onclick="zoomOut()" />
</div>
<div id="score">
<p id="scoreCount">
<b></b>
</p>
</div>
</body>
</html>
Could anybody help me to get the solution.
FYI: I am running this code in Phonegap NOT in browser.
$( '#id' ).on( 'touchstart',function(){
//your code
});
here id is id of your html element on which you want to listen touch event.
$('#id').on('touchmove',function(){
alert("T");
});
$('#id').on('click',function(){
alert("T");
});
I have found the answer, I made div with invisible and placed the images with position absolute and use the id's of images and trigger the touchstart event.
above said example here
$('#id').on('touchmove',function(){
alert("T");
});
$('#id').on('click',function(){
alert("T");
});
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
I have a PHP-page with a series of pie chart images (I use Google Chart Tools) all of the same 700x280 size:
<html>
<head>
<script>
var chart1 ='http://chart.apis.google.com/chart?cht=bhg&chs=700x280&chd=s:el,or&chco=4d89f9,c6d9fd';
var chart2 ='http://chart.apis.google.com/chart?cht=bhg&chs=700x280&chd=s:el,or&chco=4d89f9,c6d9fd&chbh=15,4,15';
var chart3 ='http://chart.apis.google.com/chart?cht=bvg&chs=700x280&chd=s:hello,world&chco=4d89f9,c6d9fd&chbh=15,4,15';
XXX please suggest a function here XXX
</script>
</head>
<body>
<img src="logo.png" width=700 height=280>
Chart 1:
<img src="http://chart.apis.google.com/chart?cht=p&chd=s:Uf9a&chs=700x280&chl=January|February|March|April" width=700 height=280>
Chart 2:
<img src="http://chart.apis.google.com/chart?cht=p&chd=s:Uf9a&chs=700x280&chdl=May|Juny|July|August" width=700 height=280>
Chart 3:
<img src="http://chart.apis.google.com/chart?cht=p&chd=s:Uf9a&chs=700x280&chl=September|October|November|December" width=700 height=280>
</body>
</html>
I would like to offer users the possibility to view the same data as a bar chart - when they click on a chart.
Last time I've used Javascript it had been for MSIE4 and Netscape. Please give me some pointers for my little function.
I.e. I don't need any help with constructing Google Charts, I just need little help on the Javascript function to rotate images in-place, on a mouse click, but with the following requirements:
1) Users with Javascript disabled should be still able to see the pie charts. Also it would be nice to enable them to see the bar charts too (i.e. by putting bar charts behind an HTML-link or maybe you hide the bar charts with Javascript and for users with Javascript disabled they are not hidden - which is okay).
2) Please 1 universal function for all charts - i.e. I don't want to have 10 functions for 10 charts.
Thank you very much! Alex
Realizing it's ages since I wrote any javascript without a framework (you forgot to mention if you were using one.. You probably should!). Anyway, here's my stab at it. People without Javascript can hover the pie charts to see the bar charts, while people with Javascript can click on them.
<style type="text/css">
img.primary { display: inline; }
img.secondary { display: none; }
div.foo:hover img.secondary { display: inline; }
div.foo:hover img.primary { display: none; }
</style>
<script type="text/javascript">
function swapImages(container)
{
for(var child in container.childNodes)
{
child = container.childNodes[child];
if(child.nodeName == "IMG")
child.className = child.className == "primary" ?
"secondary" : "primary";
}
}
window.onload = function() {
// Remove the foo class when the page loads, to disable hover
var chartArea = document.getElementById("chartArea");
for(var child in chartArea.childNodes)
{
child = chartArea.childNodes[child];
if(child.nodeName == "DIV" && child.className == "foo")
child.className = "";
}
}
</script>
<div id="chartArea">
<div class="foo" onclick="swapImages(this);">
<img class="primary" src="http://somewhere/piechart1.png" />
<img class="secondary" src="http://somewhere/barchart1.png" />
</div>
<div class="foo" onclick="swapImages(this);">
<img class="primary" ... />
<img class="secondary" ... />
</div>
<div class="foo" ....>
</div>
If you can live with the image changing on hover instead of on click, you may not need any JavaScript...
<style type="text/css">
/*<[CDATA[*/
a.chart,a.chart:hover{
cursor:default;
display:block;
background-repeat:no-repeat;
width:700px;
height:280px;
}
#chart1{background-image:url(http://chart.apis.google.com/chart?cht=p&chd=s:Uf9a&chs=700x280&chl=January|February|March|April);}
#chart1:hover{background-image:url(http://chart.apis.google.com/chart?cht=bhg&chs=700x280&chd=s:el,or&chco=4d89f9,c6d9fd);}
#chart2{background-image:url(http://chart.apis.google.com/chart?cht=p&chd=s:Uf9a&chs=700x280&chdl=May|Juny|July|August);}
#chart2:hover{background-image:url(http://chart.apis.google.com/chart?cht=bhg&chs=700x280&chd=s:el,or&chco=4d89f9,c6d9fd&chbh=15,4,15);}
#chart3{background-image:url(http://chart.apis.google.com/chart?cht=p&chd=s:Uf9a&chs=700x280&chl=September|October|November|December);}
#chart3:hover{background-image:url(http://chart.apis.google.com/chart?cht=bvg&chs=700x280&chd=s:hello,world&chco=4d89f9,c6d9fd&chbh=15,4,15);}
/*]]>*/
</style>
<a id="chart1" class="chart" href="javascript://"><br/></a>
<a id="chart2" class="chart" href="javascript://"><br/></a>
<a id="chart3" class="chart" href="javascript://"><br/></a>