I'm trying to create a matrix of canvases which each would be the size of the device-width and device-height. The idea is to have this matrix from where the view would move from canvas to canvas by pressing a button. So basically you would only see one canvas at a time, and others would locate up/down and left/right out of the screen.
I'm really new to javascript and webdesign so I'm not sure if the canvas element is the best way to do this at all. I don't have any code to show because I just started this project and wanted to ask first to get it right from the begining.
Is the approach of multiple canvases a good way to go or what would be better option and how to do it?
Thanks!
This is a small start to get you started with how you can make canvas elements dynamically. You should look at W3 Schools for reference on how to edit DOM elements. Create element in the DOM.
window.onload = function() {
var canvasElements = [];
var canvas1 = document.createElement("canvas");
canvas1.id = "canvas1";
canvasElements.push(canvas1);
}
What you want in your solution
1) Make a CSS class with full width and height of the page.
2) Add canvas elements dynamically to the page using JavaScript and DOM manipulation.
3) For each canvas, add it to the DOM, and do the logic you want with it (render elements and draw circles / images whatnot). This will require a lot of JavaScript, so I would suggest you start out simple with a single canvas.
I hope that gets you going.
HTML element 'Canvas' provide functions getImageData and putImageData, so it is possible to read as well as to modify image-data. I need this functionality in an ExtJS (Sencha,version 5.1) project. I have to use a sprite of type 'image'. But I can't find any functions addressing neither access to pixels nor access to undrlying canvas, if such is used. Is there an another approach to achieve this?
with regards
Rafal Ziolkowski
So what you need to do is draw your sprites onto a canvas? From a browse of the ext js code there is a Ext.draw.engine.Canvas component which I believe uses a html canvas element. In this class you may be able to do what you want and get image data. If not you can always go and grab the element it renders and call the appropriate getImageData and putImageData. Hope this helps.
drawContainer = Ext.create('Ext.draw.Container', {
items: [{
mySprite
}]
});
// after render
surface = drawContainer.getSurface();
surface.flatten(size, surface); // returns the drawn image data
// do this or get the element
canvas = surface.el.down('canvas');
not sure if this is what you want but hope it helps. Consult the documentation theres plenty of information on drawing sprites.
senchadocs
1) I'm caching a container filled with objects and then getting the canvas with .cacheCanvas in easel. I use this canvas as a bitmap image for my background (for performance reasons).
2) When I want to make minor changes to the image, rather than re-caching the large container, I get the context('2d') of the cachedCanvas(that I store in an easel Bitmap() ) and I draw onto the cachedCanvas.
The issue i'm having is when I draw onto the context of a cachedCanvas, it seems like the canvas is shared with the container and the bitmap, so when I do step 2) all of the imageDraws that I do are also done to the container. After repeating step 1) I want just the container and it's objects. (Not all of the context.draws that I did in step 2) )
TLDR: Is there a proper way to draw on a cachedCanvas, but also have the ability to revert to the original cachedCanvas?
This was solved by using uncache();
I am trying to program a web game in Jquery with the GameQuery plugin, problem is the GameQuery plugin has no support for per pixel collision detection only collision detection with bounding boxes. Is it possible to implement per pixel collision detection in javascript/Jquery?
I have a world map with countries and a player which is moved using the arrow keys, I want to be able to tell which country the player is in at any time and the countries are irregular shapes.
Or attack it from a different angle...so to speak...
Vectors may be your key, cool stuff happening at http://www.raphaeljs.com
maybe some sort of combo/integration could work?
alright here is kind of a solution:
assign each country a different color in you map (do not assign special colors to borders, borders should be colored in either color of the countries).
load that image into a canvas
var img = new Image();
img.src = 'worldmap.png';
var map = document.getElementById('canvas').getContext('2d');
map.drawImage(img, 0, 0);
after that you can display your normal map above that map (it is only a reference, and can be hidden under other stuff - use divs and z-index for that).
to determine in which country the player is just get the pixel-data at his position
data = map.getImageData(x, y, 1, 1).data;
key = data.join("-"); // something like "255-0-0-255" for red
country = countries[key];
it should be an rgba-array, you may then look up what country is assigned to that color.
so you will have to keep an array with the imploded rgba-values as key and the country names as value.
countries = {
"255-0-0-255" : "Russia",
"255-0-255-255" : "China",
...
};
this does only work in browsers that have the canvas object. so if you are doing this on iphone or android you are lucky!
The images are just pngs with solid colours for the country and transparency for the rest.
It is not possible.
You have, however, a not very complicated alternative: use polygon-based collision.
Use an image to present the countries to the user, but use a polygon internally.
You may find a very complete explanation about how to implement this on this forum entry (you may have to scroll down a bit, until you see the images). The guy asking the question there wanted to do more or less the same as you want todo (mouse position instead of character position).
Regards!
I've built an analytical data visualization engine for Canvas and have been requested to add tooltip-like hover over data elements to display detailed metrics for the data point under the cursor.
For simple bar & Gaant charts, tree graphs and node maps with simple square areas or specific points of interest, I was able to implement this by overlaying absolutely-positioned DIVs with :hover attributes, but there are some more complicated visualizations such as pie charts and a traffic flow rendering which has hundreds of separate areas defined by bezeir curves.
Is is possible to somehow attach an overlay, or trigger an event when the user mouses over a specific closed path?
Each area for which hover needs to be specified is defined as follows:
context.beginPath();
context.moveTo(segmentRight, prevTop);
context.bezierCurveTo(segmentRight, prevTop, segmentLeft, thisTop, segmentLeft, thisTop);
context.lineTo(segmentLeft, thisBottom);
context.bezierCurveTo(segmentLeft, thisBottom, segmentRight, prevBottom, segmentRight, prevBottom);
/*
* ...define additional segments...
*/
// <dream> Ideally I would like to attach to events on each path:
context.setMouseover(function(){/*Show hover content*/});
// </dream>
context.closePath();
Binding to an object like this is almost trivial to implement in Flash or Silverlight, since but the current Canvas implementation has the advantage of directly using our existing Javascript API and integrating with other Ajax elements, we are hoping to avoid putting Flash into the mix.
Any ideas?
You could handle the mousemove event and get the x,y coordinates from the event. Then you'll probably have to iterate over all your paths to test if the point is over the path. I had a similar problem that might have some code you could use.
Looping over things in this way can be slow, especially on IE. One way you could potentially speed it up - and this is a hack, but it would be quite effective - would be to change the color that each path is drawn with so that it is not noticeable by humans but so that each path is drawn in a different color. Have a table to look up colors to paths and just look up the color of the pixel under the mouse.
Shadow Canvas
The best method I have seen elsewhere for mouseover detection is to repeat the part of your drawing that you want to detect onto a hidden, cleared canvas. Then store the ImageData object. You can then check the ImageData array for the pixel of interest and return true if the alpha value is greater than 0.
// slow part
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.fillRect(100,100,canvas.width-100,canvas.height-100);
var pixels = ctx.getImageData(0,0,canvas.width,canvas.height).data;
// fast part
var idx = 4 * (mouse_x + mouse_y * canvas.width) + 3;
if (pixels[idx]) { // alpha > 0
...
}
Advantages
You can detect anything you want since you're just repeating the context methods. This works with PNG alpha, crazy compound shapes, text, etc.
If your image is fairly static, then you only need to do this one time per area of interest.
The "mask" is slow, but looking up the pixel is dirt cheap. So the "fast part" is great for mouseover detection.
Disadvantages
This is a memory hog. Each mask is W*H*4 values. If you have a small canvas area or few areas to mask, it's not that bad. Use chrome's task manager to monitor memory usage.
There is currently a known issue with getImageData in Chrome and Firefox. The results are not garbage collected right away if you nullify the variable, so if you do this too frequently, you will see memory rise rapidly. It does eventually get garbage collected and it shouldn't crash the browser, but it can be taxing on machines with small amounts of RAM.
A Hack to Save Memory
Rather than storing the whole ImageData array, we can just remember which pixels have alpha values. It saves a great deal of memory, but adds a loop to the mask process.
var mask = {};
var len = pixels.length;
for (var i=3;i<len;i+=4) if ( pixels[i] ) mask[i] = 1;
// this works the same way as the other method
var idx = 4 * (mouse_x + mouse_y * canvas.width) + 3;
if (mask[idx]) {
...
}
This could be done using the method ctx.isPointInPath, but it is not implemented in ExCanvas for IE.
But another solution would be to use HTML maps, like I did for this little library : http://phenxdesign.net/projects/phenx-web/graphics/example.htm you can get inspiration from it, but it is still a little buggy.
I needed to do detect mouse clicks for a grid of squares (like cells of an excel spreadsheet). To speed it up, I divided the grid into regions recursively halving until a small number of cells remained, for example for a 100x100 grid, the first 4 regions could be the 50x50 grids comprising the four quadrants.
Then these could be divided into another 4 each (hence giving 16 regions of 25x25 each).
This requires a small number of comparisons and finally the 25x25 grid could be tested for each cell (625 comparisons in this example).
There is a book by Eric Rowell named "HTML5 CANVAS COOKBOOK". In that book there is a chapter named "Interacting with the Canvas: Attaching Event Listeners to Shapes and Regions". mousedown, mouseup, mouseover, mouseout, mousemove, touchstart, touchend and touchmove events can be implemented. I highly suggest you read that.
This can't be done (well, at least not that easily), because objects you draw on the canvas (paths) are not represented as the same objects in the canvas. What I mean is that it is just a simple 2D context and once you drawn something on it, it completely forgets how it was drawn. It is just a set of pixels for it.
In order to watch mouseover and the likes for it, you need some kind of vector graphics canvas, that is SVG or implement your own on top of existing (which is what Sam Hasler suggested)
I would suggest overlaying an image map with proper coordinates set on the areas to match your canvas-drawn items. This way, you get tooltips AND a whole lot of other DOM/Browser functionality for free.