When we use the accordion, we call it using an id inside a div
<div id="accordion">
What I want to do is using accordion inside a canvas element. Canvas tag already calls its id, I don't have any idea how to solve this issue.
The main purpose is to have an area on the left where the images are sorted in three sections, which will be put inside an accordion. On the right, I drawed a grid inside another canvas element. This is where the images will be dropped.
Here is the code, I stopped here, and I don't know for what reason jsfiddle only shows one canvas although the drawing of the grid is correct. I apologize for my bad code.
http://jsfiddle.net/uS4er/4/
The jQueryUI accordion wiget will not operate inside an html canvas.
An alternate plan:
You could create your image-source-accordion outside and left of the canvas.
Then use jQuery draggable plus canvas as a dropzone to copy an image from your toolbox and draw it on the canvas.
This link shows how to use jqueryUI draggable to "drop" an img element on the canvas:
Drag controls from container and drop/draw them on canvas
Not sure if this is the result you want, but this will render a <div id="accordion"> on a <canvas> element, or any other content on a canvas. http://jsfiddle.net/L93gA/
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var data = "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
"<foreignObject width='100%' height='100%'>" +
"<div xmlns='http://www.w3.org/1999/xhtml' style='font-size: 12px;' id='accordion'>" +
"Content of accordion" +
"</div>" +
"</foreignObject>" +
"</svg>";
var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"});
var url = DOMURL.createObjectURL(svg);
img.onload = function() {
ctx.drawImage(img, 0, 0);
DOMURL.revokeObjectURL(url);
};
img.src = url;
Based on the example on https://developer.mozilla.org/en-US/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas
Related
I am trying to add a touch event to an img control on my html5 page.
This is what I have so far:
<img
src="Images/Home-icon.png"
onclick="Menu_Click('Home');"
ontouchend="Menu_Click('Home');"
draggable="false"
cssclass="iconImageStyle"
style="cursor: pointer;"
alternatetext="Home"
tooltip="Home"
height="32"
width="32" />
The click event from a normal web browser works properly.
But when I try to access it from my ipad, it does not react.
Help would be very welcomed.
Edit 1
Still no luck so far.
I tried to surround the img with a div and add the touchend event to the div, but it was not responding to it neither.
Edit 2
I followed a tutorial that works on my ipad.
Basically the tutorial is a canvas that displays the coordinates of the touch events inside the canvas.
I simply added the canvas and javascript to my page and let it overlap some of my img buttons.
My page reacts to the touch events and the canvas displays the coordinates properly.
Now this is where it is getting weird.
The buttons that appear inside the canvas now reacts to the touch end event but actually trigger the onclick event!
The same buttons that are not inside the canvas do not react to anything...
This is the tutorial code I pasted in my page
<script type="text/javascript">
var can, ctx, canX, canY, mouseIsDown = 0;
function init() {
can = document.getElementById("can");
ctx = can.getContext("2d");
document.body.addEventListener("mouseup", mouseUp, false);
document.body.addEventListener("touchcancel", touchUp, false);
}
function mouseUp() {
mouseIsDown = 0;
mouseXY();
}
function touchUp() {
mouseIsDown = 0;
// no touch to track, so just show state
showPos();
}
function mouseDown() {
mouseIsDown = 1;
mouseXY();
}
function touchDown() {
mouseIsDown = 1;
touchXY();
}
function mouseXY(e) {
if (!e)
var e = event;
canX = e.pageX - can.offsetLeft;
canY = e.pageY - can.offsetTop;
showPos();
}
function touchXY(e) {
if (!e)
var e = event;
e.preventDefault();
canX = e.targetTouches[0].pageX - can.offsetLeft;
canY = e.targetTouches[0].pageY - can.offsetTop;
showPos();
}
function showPos() {
// large, centered, bright green text
ctx.font = "24pt Helvetica";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillStyle = "rgb(64,255,64)";
var str = canX + ", " + canY;
if (mouseIsDown)
str += " down";
if (!mouseIsDown)
str += " up";
ctx.clearRect(0, 0, can.width, can.height);
// draw text at center, max length to fit on canvas
ctx.fillText(str, can.width / 2, can.height / 2, can.width - 10);
// plot cursor
ctx.fillStyle = "white";
ctx.fillRect(canX - 5, canY - 5, 10, 10);
}
</script>
<canvas id="can" height="200" width="300" style="background-color: black">
</canvas>
I will continue to investigate.
But from what is looks like I will have to put a canvas behind my buttons...
I would prefer to avoid that if possible, but so far I do not see any other solutions.
If that works, I will post it as a solution unless someone wiser than me can propose something better.
Edit 3
I confirm that the javascript is not useful.
Just having the canvas behind the img make them respond to the click event.
I am not sure why this happen, but I will take it until I can find a better solution.
If anyone as an explanation or better solution, you are welcomed to post it.
Ok, finally figured it out.
Looks like the Touch Events do not work properly if you use absolute position for your elements.
I revised my div tables layout using css and now everything is working fine.
I am making the simple canvas application.
I want to use image for background of canvas.
I have found out that I should use drawImage(img,x,y).
This is my codes ,but drummap.img doesn't appear.
Where is wrong?
Test
<canvas id="leap-overlay"></canvas>
<script src="leap.js"></script>
<script>
var canvas = document.getElementById("leap-overlay");
// fullscreen
canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;
// create a rendering context
var ctx = canvas.getContext("2d");
ctx.translate(canvas.width/2,canvas.height);
var img = new Image();
img.src = "drummap.jpg";
ctx.drawImage(img,0,0,100,100);
Assuming that your image drummap.jpg is located in said directory, create the image, set the onload to use the new image, and then set the src (see):
var img = new Image();
img.onload = function () {
ctx.drawImage(img, 0, 0, 100, 100);
};
img.src = 'drummap.jpg';
I'm not sure how you're clearing your canvas or what your drawing, but remember your canvas is inherently transparent so feel free to give the canvas a css style background:
<canvas style = "background-image: url(pathtoyourimage.jpg);"></canvas>
Hope that helps.
I have an idea of making a canvas the background with an image. The reason why I want the canvas element to be the background is because I would like to blur the image when the user is logged in. I think that would be a nice effect. And since I don't refresh the page I like it to animate a blurring effect. I am going to have multiple questions in here because they all rely on each other.
I have 2 ideas of how to make this. the first one will have a simple div tag with the background image set. then, when the user have logged in - a canvas element will be created by the script with the background image placed as in the div, then blur it and let it fade in over the div tag.
Another way would be to build the canvas element from the beginning and then let the image be set from the beginning.
This is how I make a background image.
var canvas = document.getElementById('bg_canvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
imageObj.onload = function() {
context.drawImage(imageObj, 0, 0);
};
imageObj.src = '2.jpg';
Okay.. thats the easy part.. I need a way to make the height or width in the drawImage function set to auto. if the width is bigger than the height I want the height to be set to auto. I don't want the image to be stretched over the screen. How should I do that?
Now problem number 2. When the user resizes the screen, I would like to resize the image inside the canvas element as well. blurred or not blurred.
i assume it would be set to something like this:
$(document).ready(function() {
winResize();
$(window).resize(function() {
winResize());
}
});
function winResize() {
var canvas = document.getElementById('bg_canvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
imageObj.onload = function() {
context.drawImage(imageObj, 0, 0, canvas.height, canvas.width);
};
imageObj.src = '2.jpg';
}
Now I still need the auto mechanism for the height or width of the image.
I am not going to ask for the blur effect, since it should be able to find online somewhere, but what i would like to know is what you would recommend for me to do, when fading in the blurred version. I don't remember there should be a way to fade inside a canvas element, so perhaps I have to duplicate the already existing canvas and then blur and then fade in.
Load the plain image, use a canvas to create a blurred version of the image, then turn that into a real image again for use in an <img> or css background:
function blurImage(imgURL) {
var img = new Image();
img.onload = function() {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var context = canvas.getContext("2d");
context.drawImage(img,0,0);
/*
code that actually blurs the image goes here
*/
var dataURI = canvas.toDataUrl("image/png");
setBlurredImage(dataURI);
};
img.src = imgURL;
}
with a set handler:
function setBlurredImage(dataURI) {
whateverElement.style.background = "url(" + dataURI + ")";
}
And now you have a background image that is blurred.
I have a flash animation I am trying to convert to HTML5. Now I have taken out all the images. For example in the hand animation, I have taken images of all hand images. I have made the canvas with the base drawing but I don't know how to replace those images frame by frame.
function draw(){
var canvas = document.getElementById('canvas');
if(canvas.getContext){
// canvas animation code here:
var ctx = canvas.getContext('2d');
var lhs = new Image();
lhs.src = "images/left_hnd_1.png";
lhs.onload = function(){
ctx.drawImage(lhs, 293, 137);
}
} else {
// canvas unsupported code here:
document.getElementById('girl').style.display = "block";
}
}
Now I have three more frame for this image. left_hnd_2.png, left_hnd_3.png & left_hnd_4.png. I would've used one image but the difference in frames is way too much for it to be done with one image. How can I animate this with the time differences I want.
Any ideas would be greatly appreciated. Thanks!
Try this:
var imgNumber = 1;
var lastImgNumber = 4;
var ctx = canvas.getContext('2d');
var img = new Image;
img.onload = function(){
ctx.clearRect( 0, 0, ctx.canvas.width, ctx.canvas.height );
ctx.drawImage( img, 0, 0 );
};
var timer = setInterval( function(){
if (imgNumber>lastImgNumber){
clearInterval( timer );
}else{
img.src = "images/left_hnd_"+( imgNumber++ )+".png";
}
}, 1000/15 ); //Draw at 15 frames per second
An alternative, if you only have 4 images, would be to create a single huge image with all four in a 'texture atlas', and then use setTimeout or setInterval to call drawImage() with different parameters to draw different subsets of the image to the canvas.
This worked for me as well! For some reason, it didn't work when I had used the OP's opening code: function draw(){
However when I used: window.onload = function draw() { the animation plays on the canvas. I'm also using about 150 PNG images with an Alpha channel so this is a great way to bring 'video' or create composites to the iPad/iPhone. I confirm that it does work on iPad iOS 4.3.
E.g. var new = canvas.toDataURL("image/png");
I want the base64 that is present in this new variable to be displayed into 2nd canvas element that is present. But it does not display the base64 image using drawimage method.
It works if I use say image.png
You shouldn't use base64 to copy the canvas. You can pass the source canvas into the destination canvas' context method, drawImage.
Otherwise you will suffer a serious performance hit. See my jsperf test at http://jsperf.com/copying-a-canvas-element.
drawImage() will accept a Canvas as well as an Image object.
Try this:
//grab the context from your destination canvas
var destCtx = destinationCanvas.getContext('2d');
//call its drawImage() function passing it the source canvas directly
destCtx.drawImage(sourceCanvas, 0, 0);
First create an Image Element & give the Image source as the cached .DataURL() source
Using the Image <img /> (which we created earlier) draw the Image Content onto second Canvas element
E.g.:
window.onload = function() {
var canvas1 = document.getElementById('canvas1');
var canvas2 = document.getElementById('canvas2');
var ctx1 = canvas1.getContext('2d');
var ctx2 = canvas2.getContext('2d');
var src = canvas.toDataURL("image/png"); // cache the image data source
var img = document.createElement('img'); // create a Image Element
img.src = src; //image source
ctx2.drawImage(img, 0, 0); // drawing image onto second canvas element
};