My image sprite (game.player_booba) doesn't appear and I do not understand why. In spite of the modification of its position in x and in y it does not appear.
game.player_booba.init();
game.player_booba.sprite.image.addEventListener("load", (event) => {
window.requestAnimationFrame(game.loop);
});
My codePen:
https://codepen.io/manonragnotti/pen/abbeEKO
Thanks
To be honest I do not see how this question is even related to PIXI. You've included it to your codePen project but you never actually used the library. All the rendering is done directly using the native 2d canvas api. And the reason why the character sprite is not drawn on the screen is because is drawn on a canvas, which is never added to the DOM. See on this line
buffer = document.createElement("canvas").getContext("2d");
you are creating a canvas element and then assign its 2d context to the variable "buffer", but the DOM element is never actually added to the document. So you need to do something like this:
bufferCanvas = document.createElement("canvas");
buffer = bufferCanvas.getContext("2d");
window.document.body.appendChild(bufferCanvas);
Related
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.
I'm two days into js,html and css programming. So very newbie!
Following and building upon this TUTORIAL
Q1: How can I add this male into the background (see figuere 1.) and prohibit any strokes outside of the borders?
Adding image to background was no biggy!
function make_base()
{
base_image = new Image();
base_image.src = 'img/bmapFront.gif';
base_image.onload = function(){
context.drawImage(base_image, 0,0);
}
}
There is a context.clip function, not sure if I can use pixel form as clipping path. Making tons of "image substractions" isn't the best way.
Any suggestions
Edit:
Did the Job for me: VeryHelpful
var frontPath = new Path2D ("M 133.41,17.00 C 141.37,2.41 160.66, !VERY LONG! ")
context.clip(frontPath);
Messy strokes!
He should look like this. Then I want to save him.
Although there is such a thing as ctx.clip(), this is sometimes not what's wanted as it's impractical to use a path.
The solution that I like involves creating a virtual empty canvas onto which you draw your pixel image. Through various manipulations, like using ctx.getImageData and similar to make sure you only get one kind of color or apply other filters only once, you can obtain an image that seems to be empty (alpha of 0, mostly) in the places where you want to clip other images or paths out.
At that point, you'd use ctx.globalCompositeOperation = 'source-atop', or pick another one you might want to use from mdn's list of globalCompositeOperations.
At this point, you can just draw this virtual canvas image onto the main canvas
I am writing an app where there may be hundreds of canvasses on a page. Rather than having the overhead of an individual stage for each canvas, I decided to have an editor that holds a stage. Once editing is completed it should copy the stage content to another canvas.
Stage offers toImage and toDataURL to get hold of the content however according this performance test, both those methods will be very slow compared to context.drawImage.
See: http://jsperf.com/copying-a-canvas-element
Since I only use one layer in a stage and a layer holds a canvas, I thought I could do this:
desticationCtx.drawImage(layer.getContext().canvas, 0,0);
unfortunately that doesn't produce any results (It does run though)
Since a stage has a bufferCanvas I also tried:
destinationCtx.drawImage(this.stage.bufferCanvas.element,0,0);
Again no results although I can see the content on the stage canvas on the page.
However if I dig down in my page to get to the actual canvas created and used by kineticjs:
destinationCtx.drawImage(document.getElementById('mydiv').children[0].children[0],0,0);
I do get results. What is the proper way to copy kineticjs stage content to another canvas?
access a layer canvas element like this:
var canvasElement = layer.getCanvas().getElement();
and the context like this:
var context = layer.getCanvas().getContext();
Here's the docs of interest:
http://kineticjs.com/docs/Kinetic.Layer.html#getCanvas
http://kineticjs.com/docs/Kinetic.Canvas.html
With the last and newer version of kineticjs the method from the as correct marked answer doesn't work anymore.
Nowadays I just used the following approach to get the kineticjs main canvas - with the help of jquery:
var canvas = $('#canvasDiv').find('canvas');
console.log("Canvas: %O", layerCanvas);
Just replace
#canvasDiv
with the ID of your container.
I am trying out a sample code that converts a color image to grey scale on a canvas in WebOS (enyo). When I use the ctx.getImageData method to read the pixels, the imageData contains only zeros. The sample I am using is provided in the link below:
http://chopapp.com/#x8t2ymad
Does WebOS support reading pixel data from canvas? Am I doing something wrong here?
I have refered to the following link for the logic and the code:
http://net.tutsplus.com/tutorials/javascript-ajax/how-to-transition-an-image-from-bw-to-color-with-canvas/
This works fine.
you should move the getimagedata in the callback from the onload event of the image.
something like:
draw: function(image) {
this.ctx.drawImage(event.target, 0, 0);
this.greyImage();
},
and set the source after binding the event
image.onload = enyo.bind(this, "draw");
image.src = "images/image.png";
to avoid a racing condition
now the imagedata is retrieved before the actual pixels are loaded. Which results in an empty array.
Is there any trick to determine if user clicks on given element rendered in canvas? For example I'm displaying rhombus from .png file with transparent background and i want to know if user click inside or outside that figure (like mouse-element collision).
There is no concept of individual elements in a canvas - it is simply just an area that you're drawing pixels onto. SVG on the other hand is made up of elements which you can then bind events to. However there are a few approaches you can take to add click events to canvas:
Position an html element that overlays the area on the canvas you want to be clickable. A for a rectangular area or an image map for something more irregular.
Use separate canvases for each element that you want to be clickable.
CAKE - I haven't used this myself, but it's description is "SVG sans the XML". This may cover your needs. Demos here http://glimr.rubyforge.org/cake/canvas.html#EditableCurve
One idea is to draw the image to a temporary canvas, then use getImageDate() to receive data for the pixel you are interested in, and check if its alpha value is 0 ( = transparent).
The following is a sketch of a solution. It is assumed that...
x and y are the coordinates of the mouse click event
you are looping over gameObjects, the current object being stored in the variable gameObject
the game object has been initialized with an image, x and y coordinates
The following code would then check whether the click was on a transparent area:
var tempCanvas = document.createElement('canvas');
if (tempCanvas.getContext) {
tempContext = tempCanvas.getContext('2d');
}
tempContext.drawImage(gameObject.img, 0, 0);
var imgd = tempContext.getImageData(x - gameObject.x, y - gameObject.y, 1, 1);
var pix = imgd.data;
if (pix[3] == 0) {
// user clicked on transparent part of the image!
}
Note: This is probably quite inefficient. I'm sure someone can come up with a better solution.
I have solve this problem using kintech.js, tutorials and examples can be found: http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-tutorial/