I'm changing width and height of an image object before drawing on canvas:
earth.onload = function () {
this.width = 50;
this.height = 50;
}
earth.src = 'images/earth-transparent.png';
// and later on
function drawPlanet(xCenter, yCenter, radius, speed, img) {
var ms = time.getSeconds() * 1000 + time.getMilliseconds();
var angle = ((2 * Math.PI) / (speed * 1000) * ms);
var xDelta = radius * Math.sin(angle);
var yDelta = radius * Math.cos(angle);
var x = xCenter + xDelta;
var y = yCenter + yDelta;
ctx.drawImage(img, x - img.width / 2, y - img.height / 2, img.width, img.height);
}
var time = new Date();
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.strokeStyle = 'rgba(0,153,255,0.4)';
ctx.save();
drawPlanet(300, 300, 200, 6, earth);
(drawPlanet is called in the callback of a setInterval, thus the load event of the image has fired) Unfortunately the size of the image being drawn is the original one. When I output width and height in the debugger their value is 50. Why is this?
Related
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var width = 0;
var height = 0;
var diagonal = 0;
var image = new Image();
image.crossOrigin = 'Anonymous';
image.src = `source url`;
image.onload = () => {
width = image.naturalHeight;
height = image.naturalWidth;
diagonal = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
ctx.canvas.height = diagonal;
ctx.canvas.width = diagonal;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.translate(diagonal / 2, diagonal / 2);
ctx.rotate((0 * Math.PI) / 180);
ctx.drawImage(image, -width / 2, -height / 2);
ctx.restore();
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.translate(diagonal / 2, diagonal / 2);
ctx.rotate((90 * Math.PI) / 180);
ctx.save();
canvas.height = image.height;
canvas.width = image.width;
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
ctx.restore();
console.log(canvas.toDataURL("image/jpeg"))
};
<canvas id="canvas"></canvas>
I have an image of dimensions 1200x900. I want to rotate it by 90 degrees in clockwise and after rotation change its dimension again to 1200*900. How can I do this using canvas of HTML5.
I am attaching image here.
I want the destination image to be of size 1200x900. Please let me know, how to do this.
I don't see anywhere where you calculate the ratio between height & width...
We calculate that and use it in our drawImage to reduce the size.
...see sample below:
I keep the canvas size to the original image to show it in the background
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var image = new Image();
image.src = "http://i.stack.imgur.com/UFBxY.png";
image.onload = () => {
canvas.height = image.naturalHeight;
canvas.width = image.naturalWidth;
// original image
ctx.globalAlpha = 0.2;
ctx.drawImage(image, 0, 0);
ctx.rect(0, 0, canvas.width, canvas.height);
ctx.fill()
// rotated image
ctx.save();
ctx.globalAlpha = 1;
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate(Math.PI / 2);
let ratio = canvas.height/canvas.width
ctx.drawImage(image, -canvas.height / 2, -canvas.width / 2, canvas.width/ratio, canvas.width);
ctx.restore();
};
<canvas id="canvas"></canvas>
I was not sure what your diagonal calculation was needed for, so I just removed that and anything else not relevant... in future questions if you can explain your logic we can better respond to what/where your approach is going wrong
You can use same logic for other similar transformation...
here is another code sample:
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var image = new Image();
image.src = "http://i.stack.imgur.com/UFBxY.png";
image.onload = () => {
canvas.height = canvas.width = Math.max(image.naturalWidth, image.naturalHeight);
// original image
ctx.globalAlpha = 0.2;
ctx.drawImage(image, 0, 0);
ctx.rect(0, 0, image.naturalWidth, image.naturalHeight);
ctx.fill()
// rotated image
ctx.save();
ctx.globalAlpha = 1;
ctx.translate(image.naturalHeight / 2, image.naturalWidth / 2);
ctx.rotate(Math.PI / 2);
ctx.drawImage(image, -image.naturalWidth / 2, -image.naturalHeight / 2);
ctx.restore();
};
<canvas id="canvas"></canvas>
I'm trying to piece together a sphere with individual slices. Basically, I have multiple SphereGeoemtery slices that form a sphere and used to project a panorama. Slices are used for lazy loading very large panoramas.
With the default texture wrapping mode (THREE.ClampToEdgeWrapping) on these slices, from far away the panorama looks fine but if you zoom in it's very clear the edges of the meshes are stretching, causing visible seams. It make sense since it's stretching the last pixel at the edge..
I also tried changing wrapping mode to THREE.RepeatWrapping, however, the seam becomes completely visible:
So my question is, what's the best method here for piecing together meshes? Or is this just unavoidable?
Off the top of my head you'd have to make each texture contain one border row and border column in each direction that's a repeat of the its neighbor, then adjust the UV coordinates appropriately
For example if the big image is 8 pixels wide and 6 pixels tall
ABCDEFGH
IJKLMNOP
QRSTUVWX
YZ123456
789abcde
fghijklm
And you want to divide it into into 4 parts (each 4, 3)
then you'd need these 4 parts
ABCDE DEFGH
IJKLM LMNOP
QRSTU TUVWX
YZ123 23456
QRSTU TUVWX
YZ123 23456
789ab abcde
fghij ijklm
Also to make it easy repeat the edges so
AABCDE DEFGHH
AABCDE DEFGHH
IIJKLM LMNOPP
QQRSTU TUVWXX
YYZ123 234566
QQRSTU TUVWXX
YYZ123 234566
7789ab abcdee
ffghij ijklmm
ffghij ijklmm
Repeating the edges is because I'm assuming you're splitting into more than 2x2 so technically if you were going to split something 50 pixels wide into 5 parts you could do parts that are 11, 12, 12, 12, 11 in width. The edges being only 11 pixels instead of 12 would need a different UV adjustment. But, by repeating the edges we can make them all 12, 12, 12, 12, 12 so everything is consistant.
testing, left is normal split showing the seam. Right is the fixed one, no seam.
body {
margin: 0;
}
#c {
width: 100vw;
height: 100vh;
display: block;
}
<canvas id="c"></canvas>
<script type="module">
import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r115/build/three.module.js';
function main() {
const canvas = document.querySelector('#c');
const renderer = new THREE.WebGLRenderer({canvas});
const fov = 75;
const aspect = 2; // the canvas default
const near = 0.1;
const far = 5;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.z = 1;
const scene = new THREE.Scene();
// make our texture using a canvas to test
const bigImage = document.createElement('canvas');
{
const ctx = bigImage.getContext('2d');
const width = 32;
const height = 16;
ctx.canvas.width = width;
ctx.canvas.height = height;
const gradient = ctx.createLinearGradient(0, 0, width, height);
gradient.addColorStop(0, 'red');
gradient.addColorStop(0.5, 'yellow');
gradient.addColorStop(1, 'blue');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, width, height);
}
const forceTextureInitialization = function() {
const material = new THREE.MeshBasicMaterial();
const geometry = new THREE.PlaneBufferGeometry();
const scene = new THREE.Scene();
scene.add(new THREE.Mesh(geometry, material));
const camera = new THREE.Camera();
return function forceTextureInitialization(texture) {
material.map = texture;
renderer.render(scene, camera);
};
}();
// bad
{
const ctx = document.createElement('canvas').getContext('2d');
// split the texture into 4 parts across 4 planes
const across = 2;
const down = 2;
const pixelsAcross = bigImage.width / across;
const pixelsDown = bigImage.height / down;
ctx.canvas.width = pixelsAcross;
ctx.canvas.height = pixelsDown;
for (let y = 0; y < down; ++y) {
for (let x = 0; x < across; ++x) {
ctx.clearRect(0, 0, pixelsAcross, pixelsDown);
ctx.drawImage(bigImage,
x * pixelsAcross, (down - 1 - y) * pixelsDown, pixelsAcross, pixelsDown,
0, 0, pixelsAcross, pixelsDown);
const texture = new THREE.CanvasTexture(ctx.canvas);
// see https://threejsfundamentals.org/threejs/lessons/threejs-canvas-textures.html
forceTextureInitialization(texture);
const geometry = new THREE.PlaneBufferGeometry(1 / across, 1 / down);
const material = new THREE.MeshBasicMaterial({map: texture});
const plane = new THREE.Mesh(geometry, material);
scene.add(plane);
plane.position.set(-1 + x / across, y / down - 0.25, 0);
}
}
}
// good
{
const ctx = document.createElement('canvas').getContext('2d');
// split the texture into 4 parts across 4 planes
const across = 2;
const down = 2;
const pixelsAcross = bigImage.width / across;
const pixelsDown = bigImage.height / down;
ctx.canvas.width = pixelsAcross + 2;
ctx.canvas.height = pixelsDown + 2;
// just draw the image at all these offsets.
// it would be more efficient to draw the edges
// 1 pixel wide but I'm lazy
const offsets = [
[ 0, 0],
[ 1, 0],
[ 2, 0],
[ 0, 1],
[ 2, 1],
[ 0, 2],
[ 1, 2],
[ 2, 2],
[ 1, 1],
];
for (let y = 0; y < down; ++y) {
for (let x = 0; x < across; ++x) {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
let srcX = x * pixelsAcross - 1;
let srcY = (down - 1 - y) * pixelsDown - 1;
let dstX = 0;
let dstY = 0;
let width = pixelsAcross + 2;
let height = pixelsDown + 2;
ctx.drawImage(bigImage,
srcX, srcY, width, height,
dstX, dstY, width, height);
// handle edges
if (srcX < 0) {
// repeat left edge
ctx.drawImage(bigImage,
0, srcY, 1, height,
0, dstY, 1, height);
}
if (srcY < 0) {
// repeat top edge
ctx.drawImage(bigImage,
srcX, 0, width, 1,
dstX, 0, width, 1);
}
if (srcX + width > bigImage.width) {
// repeat right edge
ctx.drawImage(bigImage,
bigImage.width - 1, srcY, 1, height,
ctx.canvas.width - 1, dstY, 1, height);
}
if (srcY + height > bigImage.height) {
// repeat bottom edge
ctx.drawImage(bigImage,
srcX, bigImage.height - 1, width, 1,
dstX, ctx.canvas.height - 1, width, 1);
}
// TODO: handle corners
const texture = new THREE.CanvasTexture(ctx.canvas);
texture.minFilter = THREE.LinearFilter;
// offset UV coords 1 pixel to skip the edge pixel
texture.offset.set(1 / ctx.canvas.width, 1 / ctx.canvas.height);
// only textureSize - 2 of the pixels in the texture
texture.repeat.set(pixelsAcross / ctx.canvas.width, pixelsDown / ctx.canvas.height);
// see https://threejsfundamentals.org/threejs/lessons/threejs-canvas-textures.html
forceTextureInitialization(texture);
const geometry = new THREE.PlaneBufferGeometry(1 / across, 1 / down);
const material = new THREE.MeshBasicMaterial({map: texture});
const plane = new THREE.Mesh(geometry, material);
scene.add(plane);
plane.position.set(1 + x / across - 0.5, y / down - 0.25, 0);
}
}
}
function resizeRendererToDisplaySize(renderer) {
const canvas = renderer.domElement;
const width = canvas.clientWidth;
const height = canvas.clientHeight;
const needResize = canvas.width !== width || canvas.height !== height;
if (needResize) {
renderer.setSize(width, height, false);
}
return needResize;
}
function render(time) {
time *= 0.001;
if (resizeRendererToDisplaySize(renderer)) {
const canvas = renderer.domElement;
camera.aspect = canvas.clientWidth / canvas.clientHeight;
camera.updateProjectionMatrix();
}
renderer.render(scene, camera);
requestAnimationFrame(render);
}
requestAnimationFrame(render);
}
main();
</script>
I'm using THREE.js and Aframe ( in Exokit ) together and I have a component for a "selfie camera". I have a weird issue that when i enter VR the camera rotation is taken over by the head rotation. I understand how the camera rotation works has changed in recent versions of THREE.js ( ArrayCamera ) but I assumed that only affected the main camera and not all cameras in the scene.
Below is my hacky component that works fine in 2D mode but in VR it messes up. The worst thing about it is im fine with it being linked to the head, the camera itself is a child object of the main camera anyway so it appears in front of the users face when opened and is moved with the head rotation - but its off angle when in VR like its pointing down and to the left a bit.
Here are some screenshots that hopefully demonstrate the issue:
Edit: need 10 rep to post images so here are urls instead
2D Mode
VR Mode
Any help much appreciated!!
AFRAME.registerComponent('selfie-camera', {
schema:{
resolution:{type:'int',default:512},
fov:{type:'int',default:100},
aspect:{type:'number',default:1.5},
near:{type:'number',default:0.001},
far:{type:'number',default:1000}
},
init() {
this.el.addEventListener('loaded',()=>{
this.renderTarget = new THREE.WebGLRenderTarget(this.data.resolution*1.5, this.data.resolution,{ antialias: true });
this.el.getObject3D('mesh').material.map = this.renderTarget.texture;
this.cameraContainer = new THREE.Object3D();
this.el.object3D.add( this.cameraContainer );
this.el.takePicture = this.takePicture.bind(this);
this.el.setSide = this.setSide.bind(this);
this.wider = 1.5;
this.photoMultiplier = 2;
this.canvas = document.createElement('canvas');
});
this.testQuat = new THREE.Quaternion();
this.el.open = this.open.bind(this);
this.el.close = this.close.bind(this);
},
open(){
this.camera = new THREE.PerspectiveCamera( this.data.fov, this.data.aspect, this.data.near, this.data.far );
this.cameraContainer.add(this.camera);
new TWEEN.Tween(this.el.getAttribute('scale'))
.to(new THREE.Vector3(1,1,1), 650)
.easing(TWEEN.Easing.Exponential.Out).start();
},
close(){
new TWEEN.Tween(this.el.getAttribute('scale'))
.to(new THREE.Vector3(0.0000001,0.0000001,0.0000001), 200)
.onComplete(()=>{
this.cameraContainer.remove(this.camera);
delete this.camera;
})
.easing(TWEEN.Easing.Exponential.Out).start();
},
tick(){
if(this.camera){
this.camera.getWorldQuaternion(this.testQuat);
console.log(this.camera.quaternion);
}
this.el.getObject3D('mesh').material.visible = false;
if(this.isTakingPicture) {
this.renderTarget.setSize(this.data.resolution * this.wider * this.photoMultiplier, this.data.resolution * this.photoMultiplier);
}
this.el.sceneEl.renderer.render( this.el.sceneEl.object3D, this.camera, this.renderTarget );
if(this.isTakingPicture){
this.isTakingPicture = false;
this.pictureResolve(this.createImageFromTexture());
this.renderTarget.setSize(this.data.resolution * this.wider, this.data.resolution);
}
this.el.getObject3D('mesh').material.visible = true;
},
setSide(isFront){
let _this = this;
new TWEEN.Tween({y:this.cameraContainer.rotation.y})
.to({y:isFront?Math.PI:0}, 350)
.onUpdate(function(){
_this.cameraContainer.rotation.y = this.y;
})
.easing(TWEEN.Easing.Exponential.Out).start();
},
takePicture(){
return new Promise(resolve=>{
this.isTakingPicture = true;
this.pictureResolve = resolve;
})
},
createImageFromTexture() {
let width = this.data.resolution*this.wider*this.photoMultiplier,
height = this.data.resolution*this.photoMultiplier;
let pixels = new Uint8Array(4 * width * height);
this.el.sceneEl.renderer.readRenderTargetPixels(this.renderTarget, 0, 0, width, height, pixels);
pixels = this.flipPixelsVertically(pixels, width, height);
let imageData = new ImageData(new Uint8ClampedArray(pixels), width, height);
this.canvas.width = width;
this.canvas.height = height;
let context = this.canvas.getContext('2d');
context.putImageData(imageData, 0, 0);
return this.canvas.toDataURL('image/jpeg',100);
},
flipPixelsVertically: function (pixels, width, height) {
let flippedPixels = pixels.slice(0);
for (let x = 0; x < width; ++x) {
for (let y = 0; y < height; ++y) {
flippedPixels[x * 4 + y * width * 4] = pixels[x * 4 + (height - y) * width * 4];
flippedPixels[x * 4 + 1 + y * width * 4] = pixels[x * 4 + 1 + (height - y) * width * 4];
flippedPixels[x * 4 + 2 + y * width * 4] = pixels[x * 4 + 2 + (height - y) * width * 4];
flippedPixels[x * 4 + 3 + y * width * 4] = pixels[x * 4 + 3 + (height - y) * width * 4];
}
}
return flippedPixels;
}
});
You have to disable VR before rendering:
var renderer = this.el.sceneEl.renderer;
var vrEnabled = renderer.vr.enabled;
renderer.vr.enabled = false;
renderer.render(this.el.sceneEl.object3D, this.camera, this.renderTarget);
renderer.vr.enabled = vrEnabled;
The following jsFiddle http://jsfiddle.net/QsMVn/6/ has animated circles and the percentage showing how much of the circle has been filled. My aim is to have the percentages animated as well so that they move along with the line right next to the end of it. I can't figure out how to do that.
Code of jsFiddle:
// requestAnimationFrame Shim
(function() {
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame;
})();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 75;
var endPercent = 85;
var curPerc = 0;
var counterClockwise = false;
var circ = Math.PI * 2;
var quart = Math.PI / 2;
context.lineWidth = 10;
context.strokeStyle = '#ad2323';
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.shadowBlur = 10;
context.shadowColor = '#656565';
function animate(current) {
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
context.arc(x, y, radius, -(quart), ((circ) * current) - quart, false);
context.stroke();
curPerc++;
if (curPerc < endPercent) {
requestAnimationFrame(function () {
animate(curPerc / 100);
});
}
}
animate();
You just use the angle you have (in radians) and calculate a distance based on that.
Prerequisites: Change a couple of lines above so you can reuse the radians:
var radians = (degrees - 90) * Math.PI / 180; // subtract 90 here
...
ctx.arc(W / 2, H / 2, W / 3, 0 - 90 * Math.PI / 180, radians, false);
Then use textAlign and textBaseline to center the text:
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
Calculate a position, demo shows text on the inside - for outside (or in the middle of arc) just adjust the dist value:
var dist = W / 3 - 40;
var tx = W * 0.5 + dist * Math.cos(radians);
var ty = H * 0.5 + dist * Math.sin(radians);
ctx.fillText(text, tx, ty);
Modified fiddle here
Hope this helps!
strange issue with HTML5 canvas: I am trying to draw one shape inside another. The outer shape is blue and the inner one red, but the end result is that both shapes end up red. If I step through the code, I can see the blue shape rendered correctly, but then the red shape renders over the blue one, even though it's smaller. Probably a problem with BeginPath/EndPath stuff, but I've seemingly tried every combination with no luck. I have lots more shapes to draw after this one, so I need to figure out how to correctly begin/end a shape before I resume work. Any help is appreciated.
<script type="text/javascript">
window.onload = function () {
var drawingCanvas = document.getElementById('canvas1');
// Is element in the DOM and does browser support canvas
if (drawingCanvas && drawingCanvas.getContext) {
// Init drawing context
var InfieldColor = "#BDB76B";
var OutfieldColor = "#F5F5F5";
var iGrassLen = Math.min(drawingCanvas.width, drawingCanvas.height) * 0.7;
var iRad = iGrassLen * 1.475;
var iAng = -60 * Math.PI / 180;
var iptInfBez0x = iRad * Math.cos(iAng);
var iptInfBez0y = -(iRad * Math.sin(iAng));
iAng = -30 * Math.PI / 180;
var iptInfBez1x = iRad * Math.cos(iAng);
var iptInfBez1y = -(iRad * Math.sin(iAng));
var iInfieldLen = (iGrassLen * (88 / 124));
var iBaseLen = iInfieldLen / 12;
//this is the relative offset between Dixon infield and outfield
var iOutfieldLen = iGrassLen * (282 / 124)
//bezier control points for outfield circle
iRad = iOutfieldLen * 1.31;
iAng = -60 * Math.PI / 180;
var iptOutBez0x = iRad * Math.cos(iAng);
var iptOutBez0y = -(iRad * Math.sin(iAng));
iAng = -30 * Math.PI / 180;
var iptOutBez1x = iRad * Math.cos(iAng);
var iptOutBez1y = -(iRad * Math.sin(iAng));
var iHRLen0 = (340 * iInfieldLen / 90) * 1.025; //iInfieldLen = 90 feet. (plus a fudge factor)
var iHRLen1 = (370 * iInfieldLen / 90) * 1.025;
var iHRLen2 = (400 * iInfieldLen / 90) * 1.025;
var iMoundWid = iInfieldLen / 10;
var context = drawingCanvas.getContext('2d');
context.fillStyle = "#FFFF00";
context.fillRect(0, 0, drawingCanvas.width, drawingCanvas.height);
context.beginPath;
context.moveTo(0, 0);
context.lineTo(iGrassLen, 0);
context.bezierCurveTo(iptInfBez1x, iptInfBez1y, iptInfBez0x, iptInfBez0y, 0, iGrassLen); // bezier curve
context.lineTo(0, 0);
context.closePath();
context.fillStyle = "blue";
context.fill();
context.lineWidth = 1;
context.strokeStyle = "black";
context.stroke();
//infield rectangle
context.beginPath;
context.rect(0, 0, iInfieldLen - (iBaseLen / 4), iInfieldLen - (iBaseLen / 4));
context.closePath;
context.fillStyle = "red";
context.fill();
context.lineWidth = 1;
context.strokeStyle = "black";
context.stroke();
}
}
</script>
context.beginPath;
...
context.closePath;
You forgot (). Without that, these are just discarded references to a function, not calls to it.