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.
Related
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);
I'm randomly drawing little stars on a canvas with the beginPath() method like this:
function makeStars(){
for(let i=0; i<100; i++){
let startingX = Math.floor(Math.random()*canvasWidth);
let startingY = Math.floor(Math.random()*canvasHeight);
ctx.beginPath();
ctx.moveTo(startingX, startingY);
ctx.lineTo(startingX-3,startingY+9.4);
ctx.lineTo(startingX+4.5, startingY+3.5);
ctx.lineTo(startingX-4.5, startingY+3.4);
ctx.lineTo(startingX+3, startingY+9.4);
ctx.closePath();
ctx.fill();
}
Is it possible to give each path a class? Something like ctx.classList.add('star');? Ultimately, I was hoping to be able to animate them with CSS.
Thanks!
Edit
Looks like CSS is not the way to go. I think I'll just try to animate my stars with javaScript in a setInterval loop. Here's a codepen of what I'm working with. Twinkling Stars Canvas
No, CSS cannot animate or interact with canvas drawing.
But You can create a Star class which will provide OOP way of updating, rendering and animating the stars.
and then push all of the stars in an array and update/render them on animate loop.
https://codepen.io/anuraghazra/pen/WLLQJv
The short answer is: No. CSS doesn't act on elements drawn on a canvas.
Drawing to a canvas is like drawing directly to paper. You're using the 2D context to act on the pen. While you could figure out a way to read the CSS and perform the animations (by redrawing and redrawing the canvas), I would think that would be way more difficult than any other alternative.
If you're set on using CSS, one alternative is to use SVG+CSS. The elements within the SVG can react to your CSS, much like HTML elements.
If you absolutely have to use a canvas, you could also draw the SVG to your canvas. Convert the SVG to a Data URI, then load that URI into an Image object, which you can then putImage onto the canvas. You would have to figure out how to draw each time the SVG updates, or poll for the new SVG information at an interval (like requestAnimationFrame).
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 looking for a way to capture the complete canvas (including elements that are moved outside the canvas) to an image. I am using the KineticJS library and I am aware of the toDataURL function. The problem is that the image is clipped to the canvas bounds.
As a workaround I thought to copy all elements on the canvas to a temporary hidden canvas which is big enough to fit all elements and then use the toDataURL function. I was wondering if there is a cleaner approach?
Interesting problem. I like the temporary canvas idea. Also, you could just resize the main canvas, apply an offsetting translation to all child elements, capture the image, then reverse-translate and resize back. This wouldn't be any more complex than copying to a hidden canvas. Plus, the single canvas approach would be more memory efficient.
Just my 3 cents.
I would agree with Alvin, you could just resize the canvas, here's how:
stage.setWidth(window.innerWidth); // inner width of your window
stage.setHeight(window.innerHeight); // inner height of your window
stage.draw(); //redraw
This would resize your stage to the width and height of your window, but this would not account for the possibility that elements would be farther than your window, but you can just modify the number inside the .set functions to account for the farthest right/left one.
If you were looking for a quick way to copy all elements in your canvas to another stage you could serialize it:
var json = stage.toJSON();
var newStage = Kinetic.Node.create(stageJson, 'newContainer');
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.