Can anyone help me look at this, I'm trying to draw lines on a canvas and it works in Edge, but in Firefox and Chrome the canvas goes black with a little frowny face in the top left corner. Code:
var cellwitdh = StaticData.SelectedTileSheet.getCellWidth();
var col = Math.floor(_gridCVS.width / cellwitdh);
var ctx = this._gridCVS.getContext2d();
for (i in 0...col)
{
ctx.beginPath();
ctx.moveTo(i cellwitdh, 0);
ctx.lineTo(i cellwitdh, this._gridCVS.width);
ctx.stroke();
ctx.closePath();
}
I don't get any error messages, just this image
The canvas was too big, I was trying to do a canvas size 24000x24000;
answer reference
Related
I'm trying to make a simple PowerPoint-like app. I'm struggling window resizing issue for this two weeks. I really appreciate it if you give me any advice!
I want to keep locating a white rectangle in the middle of a screen so I use absolutePan and zoomToPoint. It works perfect when it's loaded. However, when you resize window the position is drifting.
Here is my code
.
.
handleWindowResize()
window.addEventListener('resize', handleWindowResize)
.
.
function handleWindowResize(){
var clientWidth = document.getElementById('drawing-area').clientWidth
var clientHeight = document.getElementById('drawing-area').clientHeight
canvas.setDimensions({ width: clientWidth, height: clientHeight })
// Pan canvas to locate white board center
let panX = - (canvas.width - WB_WIDTH)/2
let panY = - (canvas.height - WB_HEIGHT)/2
var zoom = Math.min(canvas.height/WB_HEIGHT, canvas.width/WB_WIDTH) * 0.9
canvas.absolutePan(new fabric.Point(panX,panY))
canvas.zoomToPoint(new fabric.Point(canvas.width/2, canvas.height/2), zoom)
canvas.renderAll();
}
I think panning works out but zoomToPoint function doesn't work correctly. The center point of zoom doesn't seem to be correct.
I tried relativePan, setViewportTransform, and some other functions, but no luck.
Please help!
screen shot
Codepen: my code
finally I solved this issue.
Must set Zoom = 1 before panning
var zoom = Math.min(canvas.height/WB_HEIGHT, canvas.width/WB_WIDTH) * 0.9
canvas.setZoom(1) // Must set zoom = 1 before panning
canvas.absolutePan(new fabric.Point(panX,panY))
canvas.zoomToPoint(new fabric.Point(canvas.width/2, canvas.height/2), zoom)
canvas.renderAll();
I was coding a simple shape-collision-detector, but I noticed the rectangle which I move using the mouse vanishes in some window's areas.
I can't figure out why.
Here you can see the video and below the code I used.
Any advice?
Rectangle r = new Rectangle();
r.setWidth(150);
r.setHeight(150);
Group root = new Group(r, e, boh);
Scene scene = new Scene(root, 1000, 1000);
scene.setOnMouseDragged(ev -> {
r.setX(ev.getX() - r.getWidth() / 2);
r.setY(ev.getY() - r.getHeight() / 2);
});
I solved by placing another Rectangle as background.
It is known that if you have html elements (for example a modal window with lists) on top of a flash element you have huge performance issues cause flash cause the browser to repaint the any html on top of it while the flash is animating. I wonder if the same happens if you have html elements on top of an animating canvas element.
I am asking this cause I am building a canvas game and I wonder if it is a good idea to make the GUI (menus, navigation buttons etc) using DOM and not drawing it on canvas.
I just tested using Chromium Version 28.0.1500.45 Mageia.Org 3 (205727) and the elements are NOT repainted while my canvas animates.
I tried this simple box animation with a DIV over it. After that, I profiled my application to see what was happening. I noticed only the canvas was being repainted.
window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
var GX = 0;
function animate() {
var canvas = document.getElementById('jaja');
var context = canvas.getContext('2d');
// update
GX += 10;
if (GX > 500) GX = 0;
// clear
context.clearRect(0, 0, canvas.width, canvas.height);
// draw stuff
context.beginPath();
context.rect(GX, 10, 100, 100);
context.fillStyle = '#8ED6FF';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
requestAnimFrame(function() {
animate();
});
} // request new frame
Following, I tried to make the DIV repaint by selecting the text. This time yes, the DIV repainted.
Here's a screenshot of the profile.
1: We can se the Paint (600x586) being called everytime I do my animation.
2: It called Paint for the DIV element ONLY when I selected the text.
I personally do not believe any other browser would have a different behavior than that.
Yes, putting other DOM elements on top of a canvas element will reduce its performance.
This is because the browser have to do extra clipping when updating canvas / painting.
The canvas need to update 60 times per second to output to screen. If something is on top it needs to be clipped just as many times. If the DOM element is repainted as well will be browser dependent but the performance of the canvas element itself is reduced.
Usually the DOM paints happens in a single thread (but is about to change for most major browsers) so if there is extra load on that thread it will affect everything else being drawn too.
And there is the single-threading of JavaScript which is necessary to use to update canvas. If canvas has reduced performance than the script executing its changes (as well as changes to the DOM) will get hit too.
I am working on a game using EaselJS, and I am still trying the functions provided by this great library.
What I may need is Alphamaskfilter class & Spritesheet class.
Currently, I have a canvas like this:
<canvas id = 'container3' width = 320px; height = 480px;
style = 'outline: 2px solid; margin-right: 10px;float:left;'></canvas>
and in my script, I have draw a rect with blue color:
var ctx3 = document.getElementById('container3').getContext('2d');
ctx3.beginPath();
ctx3.rect(0,0,320,480);
ctx3.fillStyle = 'blue';
ctx3.fill();
So now I have a blue color 320*480 canvas. And now I have a sprite sheet to animate on it,
here is the sprite and code I wrote:
http://i.imgur.com/XumDvic.png
PS: the sprite frame is 200*200 FYI.
stage = new createjs.Stage(document.getElementById('container3'));
var test = new Image();
test.src = 'trans_blackball.png';
test.onload = function(){
var sprite = new createjs.SpriteSheet({
images: [test],
frames: {width: 200, height: 200},
animations: {
born: [0,3,0]
}
});
var animation = new createjs.BitmapAnimation(sprite);
animation.gotoAndPlay("born");
animation.x = 10;
animation.y = 10;
animation.currentFrame = 0;
stage.addChild(animation);
createjs.Ticker.addListener(window);
createjs.Ticker.useRAF = true;
createjs.Ticker.setFPS(10);
}
function tick(){
stage.update();
}
Okay, my question is: I expect an animation of an enlarging black circle on a blue background(rect), but what I got is firstly the canvas is blue, but for a certain mini-second after, the whole canvas became white, and the animation is running on the white background, what is the reason of this and how can I solve it?
Here is two points that may help:
I am working with chrome, and I check with F12 & console, the fillStyle of the canvas is still blue even it appears white after the sprite animation start
If I set the canvas background property to blue instead of drawing a blue rect on it, everything's fine!!
<canvas id = 'container3' width = 320px; height = 480px;
style = 'background: blue; outline: 2px solid; margin-right:
10px;float:left;'></canvas>
but clearly this is not what I want...
The problem can be solved as well by not using native canvas rect but use EaselJS's Shape to draw the rect:
var shape = new createjs.Shape();
shape.graphics.beginFill("#ff0000").drawRect(0, 0, 320, 480);
stage.addChild(shape);
But I still wanna know why the native rect drawing code is not working...
Please bare my bad english and thanks for reading and any attempt to help...I can elaborate more if there is anything unclear in the situation..thanks!
createjs.Stage.update() will clear the canvas-contents by default before rendering the new frame.
The reason for this is one the one hand the technical behaviour of canvas, the canvas is basically just an image of pixels, you cannot have real 'layers' and say "I just want to remove/update this one object" - you just can modify the flattened pixels of the frame or remove everything and redraw it(which is safer, easier to achieve, and actually fast enough performance-whise. And on the other hand, it makes sense to make consistent use of a framework like EaselJS, and not do some parts with the framework and some parts without it, this would result in a big mess at the end.
So, the right solution is to go with 3.
You can set myStage.autoClear = false; to prevent the Stage from autoClearing the canvas on every update() but I don't think this will suit your needs in this case.
I would recommend instead using the EaselJS Shape class to make your blue box. If it part of the EaselJS display list, it will be drawn with the other content.
javascript
var shape = new createjs.Shape();
shape.graphics.beginFill("blue").drawRect(0,0,320,480);
stage.addChild(shape);
i want to show a mesh (like gunshot) in front of my perspective camera(with first person controls) i wrote this code in the render function of my page:
var pos = camera.position;
var rot = camera.rotation;
shot.rotation.x = rot.x;
shot.rotation.y = rot.y;
shot.rotation.z = rot.z;
shot.position.x = pos.x;
shot.position.y= pos.y;
shot.position.z = pos.z + 500;
if i just change the position of my camera its good, but if i change the camera's rotation i don't see the shot in front of that.
how can i do this?
It would seem that you need to make the "shot" a child of the camera. It's not clear from your example whether you're doing that already, but this should make the shot move around with the camera properly.