canvas drawImage of a div - javascript

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

Related

Load and play a gif with javascript onclick event

On my website I have three images 1.png, 2.png and 3.png. When I click on 1.png, I want the animated gif 1a.gif to be loaded and shown/updated in the img tag located in <div id="container">. When I click on 2.png, 2a.gif should be displayed (while 1a.gif vanishes) and so on... This is my code:
<html>
<body>
<div>
<img src="1.png" onclick="document.getElementById('img').src = '1a.gif'" />
<img src="2.png" onclick="document.getElementById('img').src = '2a.gif'" />
<img src="3.png" onclick="document.getElementById('img').src = '3a.gif'" />
</div>
<div id="container">
<img id="img" src="1a.gif" />
</div>
</html>
</body>
It is working, however unreliable (tested with firefox and chrome)! When I refresh the html page and click on 1.png, than on 2.png ... suddendly at one point only the first frame of the animated gif is shown. I have to click on the same image (1,2 or 3.png) again in order to make the gif run. Why? I am looking for a light weight javascript solution without jquery. I am just asking myself why the gif is not played properly once I click on the image.
As a side note: It would be nice to show a loading image while the gif (5 MB) is loading. I failed to achive that using css:
#container {background:url('loading.png') no-repeat; }
In this case the loading image doesn't show up at all. Probably because I am updating directly from one (e.g. 1a.gif) to another (e.g. 2a.gif).
Showing it right before loading the gif did not help as well:
<img src="1.png" onclick="document.getElementById('img').src = 'loading.png';
document.getElementById('img').src = '1a.gif'" />
There are many ways of implementing this kind of thing, but to keep in line with how you're doing it, you'll want to hook into the onload event of the img.
Note that in this snippet, I don't have access to your GIFs, so I'm using the dummyimage.com service, which is pretty fast, so you don't see the "loading" for very long.
window.onload = function() {
var img = document.getElementById('img');
var container = document.getElementById('container');
var showImage = function showImage() {
img.style.display = "inline";
container.style.backgroundImage = "";
};
img.addEventListener('load', showImage);
img.addEventListener('error', showImage);
var thumbs = document.getElementsByClassName('thumb');
for (var i = 0, z = thumbs.length; i < z; i++) {
var thumb = thumbs[i];
var handler = (function(t) {
return function clickThumb() {
container.style.backgroundImage = "url('https://dummyimage.com/500x500/000/fff.gif&text=loading')";
img.style.display = "none";
img.src = t.dataset['image'];
};
})(thumb);
thumb.addEventListener('click', handler);
}
};
<div>
<img src="1.png" class="thumb" data-image="https://dummyimage.com/500x200/000/fff.gif" />
<img src="2.png" class="thumb" data-image="https://dummyimage.com/200x200/000/fff.gif" />
<img src="3.png" class="thumb" data-image="https://dummyimage.com/500x500/000/fff.gif" />
</div>
<div id="container">
<img id="img" class="main" />
</div>
This happens bacause the second img is not loaded yet!
I suggest you to put the 2 img in 2 different divs and the use javascript to hide/show the entire 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>

Text in canvas to show in timed sequences using jQuery?

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.

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>

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";

Categories

Resources