My autoresize canvas not works with kineticjs, the console say me that canvas.width and canvas.height is not defined.
Any people could help me.
Thank you .
Put the function and the call down.
function resize() {
console.log("ddddddddddddd");
//stage.setWidth((window.innerWidth / 100) * 80);
var canvas = document.getElementById('Contenedor');
console.log(canvas, canvas.height, canvas.width);
if(window.innerWidth < 1280){
var canvasRatio = canvas.height / canvas.width;
console.log(canvasRatio);
var windowRatio = window.innerHeight / window.innerWidth;
console.log(windowRatio);
var width;
var height;
if (windowRatio < canvasRatio) {
height = window.innerHeight;
width = height / canvasRatio;
} else {
width = window.innerWidth;
height = width * canvasRatio;
}
canvas.style.width = (parseFloat(width)*0.75) + 'px';
canvas.style.height = (parseFloat(height)*0.75) + 'px';
}else{
canvas.style.width=987+'px';
canvas.style.height=544+'px';
}
};
window.addEventListener('resize', resize, false);
What you can do is set the height of the canvas with respect to the width.
And use stage.setScale() and stage.setSize() to dynamically change the size of the stage
function resize() {
var canvasWidthRatio = 0.6; // canvas width to viewport width ratio
var viewPortWidth = window.innerWidth;
var canvasWidth = viewPortWidth * canvasWidthRatio;
var canvasHeight = canvasWidth * 0.6,
scale = stage.getScale(),
stageWidth = stage.getWidth(),
stageHeight = stage.getHeight(),
scaleFactor = Math.min(canvasWidth / stageWidth, canvasHeight / stageHeight),
newScale = scale * scaleFactor;
stage.setScale(newScale);
stage.setSize(canvasWidth, canvasHeight);
stage.draw();
}
window.addEventListener('resize', resize, false);
I think kineticjs sets the canvas dimensions.
set the stage width and height and don't touch the canvas directly.
Hello and sorry my bad english, also thank you to help me. I work with the code of VijayB, but with his code I have problems with multiply the object scale with a float.. I realease a few changes and for me are working.
I put the code for someone that have my own problem.
function resize() {
var __canvasWidthRatio = 0.6;
console.log( __canvasWidthRatio) ; // canvas width to viewport width ratio
var __viewPortWidth = window.innerWidth;
console.log(window.innerWidth);
var __canvasWidth = __viewPortWidth * __canvasWidthRatio;
console.log(__canvasWidth);
var aspec = 769 / 544;
var __canvasHeight = aspec *__canvasWidth * __canvasWidthRatio;
var __scale = ui.stage.getScale();
var __stageWidth = ui.stage.getWidth();
var __stageHeight = ui.stage.getHeight();
var __scaleFactor = Math.min( __canvasWidth / __stageWidth, __canvasHeight / __stageHeight);
stage.escala= __scale.x *__scaleFactor;
ui.scale=__scale.x *__scaleFactor;
stage.setScale(stage.escala,stage.escala);
stage.setSize(__canvasWidth, __canvasHeight);
stage.draw();
}
window.addEventListener('resize', resize, false);
Related
I am trying to do three things:
Aspect ratio 16:9
Triangle in centre
Webcam on top
I am trying to make it so that different computers can have a triangle in the same position with the total canvas at 16:9, but what currently happens is that it is stretching the video input.
Any ideas?
https://www.openprocessing.org/sketch/870510
var video;
function setup() {
createCanvas(1100, 619);
background(255);
video = createCapture(VIDEO);
video.size(1100,619);
video.hide();
}
function draw() {
image(video,0,0,width,height);
strokeWeight(4);
line(400, 400, 550, 150);
line(550, 150, 700, 400);
line(700, 400, 400, 400);
}
first you need to get window width and then you can calculate the canvas height with 16:9 aspect ratio
var video;
var h, w;
function setup() {
// get window width
w = window.innerWidth;
// calculate canvas height
h = (w * 9) / 16;
// create canvas
createCanvas(w, h);
background(255);
video = createCapture(VIDEO);
// get video scaling ratio
var ratio = h / video.height;
// recalculate video width
var video_w = video.width * ratio;
video.size(video_w, h);
video.hide();
}
and then to make the triangle in center, we can calculate the center by dividing height and width by 2
function draw() {
// calculate center
var cx = w / 2;
var cy = h / 2;
// set the triangle width
var width = 150;
var half_width = width / 2;
// calculate the triangle height using pythagoras theorm
var height = Math.sqrt(width * width - half_width * half_width);
var half_height = height / 2;
// draw bottom of the triangle
line(cx - half_width, cy + half_height, cx + half_width, cy + half_height);
// draw left of the triangle
line(cx - half_width, cy + half_height, cx, cy - half_height);
// draw right of the triangle
line(cx, cy - half_height, cx + half_width, cy + half_height);
}
So I'm using the function from this tutorial
http://www.html5rocks.com/en/tutorials/casestudies/gopherwoord-studios-resizing-html5-games/#disqus_thread
it looks like this -
function resizeGame() {
var gameArea = document.getElementById('canvas-container');
var widthToHeight = 11 / 6;
var newWidth = window.innerWidth;
var newHeight = window.innerHeight;
var newWidthToHeight = newWidth / newHeight;
if (newWidthToHeight > widthToHeight) {
newWidth = newHeight * widthToHeight;
gameArea.style.height = newHeight + 'px';
gameArea.style.width = newWidth + 'px';
} else {
newHeight = newWidth / widthToHeight;
gameArea.style.width = newWidth + 'px';
gameArea.style.height = newHeight + 'px';
}
gameArea.style.marginTop = (-newHeight / 2) + 'px';
gameArea.style.marginLeft = (-newWidth / 2) + 'px';
var gameCanvas = document.getElementById('ctx');
gameCanvas.width = newWidth;
gameCanvas.height = newHeight;
HEIGHT = newHeight;
WIDTH = newWidth
}
So everything that I use WIDTH and HEIGHT to position on the canvas work fine. But there's other things that I have in my game that just use an x and y and don't change with the canvas.
if(drawBall){
ctx.save();
ctx.beginPath();
ctx.arc(ball.x, ball.y, (ball.diameter/2) - 5,0, 2*Math.PI);
ctx.fillStyle = ball.color;
ctx.fill();
ctx.restore();
}
What can I do to my ball.x and ball.y to make it so it correctly changes with the canvas?
It all comes down to ratio's. Knowing that you can always re position things when the screen re-sizes.
var ratio = { x:1, y: 1 };
function start(){
ratio.x = canvas.width / canvas.clientWidth;
ratio.y = canvas.height / canvas.clientHeight;
drawSomething();
}
function drawSomething(){
context.rect(rectX * ratio.x, rectY * ratio.y, rectWidth * ratio.x, rectHeight * ratio.y);
/// stroke and all that good stuff
}
now listen for window change
window.onresize = function(){
// get new ratio's and draw again
start();
}
With this it shouldn't matter what re-size the user does the canvas will draw at the same relative position and size.
http://jsfiddle.net/27WVW/1/
I have a canvas element that uses SetInterval to animate the entrance of a background.
var c=document.getElementById("theCircle")
function drawCircle(end=2*Math.PI){
height = window.innerHeight
width = window.innerWidth
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(width/2,height/2,radius,0,end,true);
ctx.lineWidth=end/5;
ctx.closePath();
ctx.stroke();
}
function counter(start,finish,speed){
var i = start
var animation = setInterval(function(){
i += speed
if(i>=finish){clearInterval(animation)}
drawCircle(i);
}, 20)
}
counter(0.0,2*Math.PI,0.05)
On window resize the canvas element is resized to fit the window so that it always fills the page.
window.addEventListener('resize',posFix,false);
function posFix(){
c.height = window.innerHeight
c.width = window.innerWidth
drawCircle();
}
When the canvas element is resized the drawing inside is deleted. As you can see, I am calling a redraw on resize but it doesn't seem to fire properly.
What am I missing?
As discussed within the comments, the solution is to clear the animation interval within the resize event and then restart the animation.
var c = document.getElementById("theCircle"),
radius = 800;
posFix();
window.addEventListener('resize', posFix, false);
function posFix() {
c.height = window.innerHeight
c.width = window.innerWidth
clearInterval(animation);
counter(0.0, 2 * Math.PI, 0.05)
}
function drawCircle(end = 2 * Math.PI) {
height = window.innerHeight
width = window.innerWidth
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(width / 2, height / 2, radius, 0, end, true);
ctx.lineWidth = end / 5;
ctx.closePath();
ctx.stroke();
}
var animation;
function counter(start, finish, speed) {
var i = start
animation = setInterval(function () {
i += speed
if (i >= finish) {
clearInterval(animation);
}
drawCircle(i);
}, 20);
}
jsfiddle: http://jsfiddle.net/27WVW/4/
I have a canvas that scales to the 16:9 aspect ratio. However the mouse does not take the offset (black background) into account.
The dotted green line marks the canvas. At the edge the mouse should display: Mouse : 0% | 23% rather than Mouse : 7% | 23%.
The problem seems to occur here:
var x = Math.floor( mouse.x / canvas.width * 100 );
var y = Math.floor( mouse.y / canvas.height * 100 );
It works fine when I go into fullscreen mode. (because there is no offset) But otherwise it does not take the offset into account.
Additional Code:
CSS:
#aspectoverlay {
/* 16:9 */
width: 100vw;
height: 56.25vw; /* 100/56.25 = 1.778 */
border: 1px #AFFF00 dashed;
max-height: 100vh;
max-width: 177.78vh; /* 16/9 = 1.778 */
margin: auto;
position: absolute;
top:0;bottom:0; /* vertical center */
left:0;right:0; /* horizontal center */
z-index: 100;
opacity: 1;
}
JS:
var canvas = document.getElementById('aspectoverlay');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var ctx = canvas.getContext('2d');
window.addEventListener('resize', resizeCanvas, false);
function resizeCanvas () {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
canvas.addEventListener('mousemove', function(e){
mouse.x = e.x;
mouse.y = e.y;
});
var x = Math.floor( mouse.x / canvas.width * 100 );
var y = Math.floor( mouse.y / canvas.height * 100 );
ctx.fillText("Mouse : " + x + "% | " + y + "%", 50,50);
You just need to take the offsets of the element into account like so
mouse.x = e.x - this.offsetLeft;
mouse.y = e.y - this.offsetTop;
And since you are using CSS to resize and setting the canvas to the innerHeight and Width, you can't use the canvas width and height for calculations anymore you need to use offsetWidth and offsetHeight
var x = Math.floor(mouse.x / canvas.offsetWidth * 100);
var y = Math.floor(mouse.y / canvas.offsetHeight * 100);
Live Demo
Full Screen
var canvas = document.getElementById('aspectoverlay');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var ctx = canvas.getContext('2d'),
mouse = {
x: 0,
y: 0
};
ctx.fillStyle = "#fff";
window.addEventListener('resize', resizeCanvas, false);
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
ctx.fillStyle = "#fff";
}
canvas.addEventListener('mousemove', function (e) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
mouse.x = e.x - this.offsetLeft;
mouse.y = e.y - this.offsetTop;
var x = Math.floor(mouse.x / canvas.offsetWidth * 100);
var y = Math.floor(mouse.y / canvas.offsetHeight * 100);
ctx.fillText("Mouse : " + x + "% | " + y + "%", 50, 50);
});
I'm trying to draw a circle in a canvas to match the dimensions of a div. I can't understand what's wrong here (aside from the bad style), as the result is an ellipsis, which looks like the canvas size has been stretched after the drawing (JSFiddle here):
$(document).ready(function() {
scrH = $(window).height();
scrW = $(window).width();
// place map
$('body').append("<div id='pagUserStart_map1' style='border:5px solid red;'></div>");
var map = $("#pagUserStart_map1");
map.css("width", scrW - 60 + "px");
map.css("height", map.css("width"));
map.css("top", scrH / 2 - map.height()/2);
map.css("left", (scrW - map.width()) / 2);
map.css("position", "absolute");
map.css("margin", "0 auto");
map.css("border-radius", "50%");
map.css("z-index", "100");
//place canvas
$('body').append("<canvas id='canvas1'></canvas>");
var canvas = $("#canvas1");
canvas.width(map.width());
canvas.height(canvas.width());
canvas.css("position", "absolute");
canvas.position({
my: "center",
at: "center",
of: map
});
canvas = document.getElementById("canvas1");
// draw circle in canvas
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height /2 ;
var radius = 50;
context.beginPath();
context.arc(centerX, centerY, 50, 0, 2 * Math.PI, false);
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.shadowBlur = 10;
context.shadowColor = '#656565';
context.lineWidth = 10;
context.strokeStyle = '#B8CADE';
context.stroke();
});
I understand that something goes wrong between when I use JQuery to reference 'canvas1' and when I use getElementById. But why? It seems like the code is not executed sequentially. I've lost a few hours googling around and playing with the code... I really need your help.
You need to set Canvas size correctly:
canvas.attr('width', map.width());
canvas.attr('height', map.height());
And you will recieve this:
http://i.stack.imgur.com/5UsGQ.png
Set the canvas element width instead of the canvas css width:
// draw circle in canvas
canvas = document.getElementById("canvas1");
canvas.width=map.width();
canvas.height=map.height();
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height /2 ;
var radius = 50;
Simple change your absolute position to fixed.
Like this
$(document).ready(function() {
scrH = $(window).height();
scrW = $(window).width();
// place map
$('body').append("<div id='pagUserStart_map1' style='border:5px solid red;'></div>");
var map = $("#pagUserStart_map1");
map.css("width", scrW - 60 + "px");
map.css("height", map.css("width"));
map.css("top", scrH / 2 - map.height()/2);
map.css("left", (scrW - map.width()) / 2);
map.css("position", "fixed");
map.css("margin", "0 auto");
map.css("border-radius", "50%");
map.css("z-index", "100");
//place canvas
$('body').append("<canvas id='canvas1'></canvas>");
var canvas = $("#canvas1");
canvas.width(map.width());
canvas.height(canvas.width());
canvas.css("position", "fixed");
canvas.position({
my: "center",
at: "center",
of: map
});