I am building up to a rotating hypercube on an HTML5 Canvas, but before that goal I am reaching a basic difficulty with the Canvas. I have a white/uncolored canvas, and I am trying to draw lines after setting fillStyle and strokeStyle to '#000000', and I have not yet succeeded at getting any pixel on the canvas to appear other than white.
The canvas is at http://blajeny.com/tesseract.html , and the JavaScript which is part math and part old-fashioned JavaScript, is at http://blajeny.com/js/tesseract.js . The log says that it is drawing lines on the canvas, some of which should intersect the 500x500 canvas and some of which should lie completely inside the canvas, but all I can see is pure white.
The math side of it needs work in terms of projection from a higher- to a lower-dimensional surface. However the difficulty I am trying to address now is a basic HTML5 canvas issue in that I am setting a color, moving to and drawing a line to coordinates some of which overlap and some of which are within the 500x500 canvas, and not seeing anything turn black. (The JavaScript console logs the lines I am trying to draw.)
How can I get the lines I am trying to draw to show up?
You need to let canvas know when you start and stop drawing using context.beginPath() and context.stroke()/context.fill(). Here's code and a Fiddle: http://jsfiddle.net/m1erickson/Jw8XU/
<!DOCTYPE HTML>
<html>
<head>
<style>
canvas{border:1px solid red;}
</style>
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 75);
ctx.lineTo(150, 150);
ctx.stroke();
</script>
</body>
</html>
Related
For some reason, HTML canvas isn't drawing a line between extreme points. Same goes with SVG. I am trying to run the following simple snippet:
As you see, the point with 10^9 draws fine but the one with 10^10 does not. Is there a particular reason? Am I missing something here? Or can I please be pointed to a reference link? I did search but couldn't find a relevant answer.
var ctx = document.getElementById('canvas').getContext('2d');
// draws
//ctx.moveTo(10, -1000000000);
// does not draw
ctx.moveTo(10, -10000000000);
ctx.lineTo(200, 100);
ctx.stroke();
<canvas width="500" height="500" id="canvas"></canvas>
Here's a fiddle if that helps: https://jsfiddle.net/qov72ag4/
I am creating a game, I need to achieve a perfect canvas line on HTML5 under different types of screen resolutions and zooms.
To easily understand I am talking about, simply paste the two different codes into an HTML file(not jsFiddle, as it is too small to notice):
With fabric.js:
<canvas id = "c" width = "600" height = "300"></canvas>
<script src = "https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<script> var c=document.getElementById("c");
var context=c.getContext("2d");
new fabric.Canvas('c', { selection: false });
context.moveTo(0, 0);
context.lineTo(0, 300);
context.stroke();
</script>
Without fabric.js:
<canvas id = "c" width = "600" height = "300"></canvas>
<script> var c=document.getElementById("c");
var context=c.getContext("2d");
context.moveTo(0, 0);
context.lineTo(0, 300);
context.stroke();
</script>
Now as you can see, fabric.js removes the blurriness that you get under different kind of browser zooms(Mouse wheel) once the page loads.
I have two problems with it though:
1) Once you click on the canvas the line is gone
2) It's a big framework/library, and I only need it to draw lines(Maybe not if it can achieve the same thing with PNG images)
So, is there a way to achieve the same sharpness result with a clean, short javascript code, without using fabric.js?
If not, how can I fix the clicking problem?
Thanks.
All lines drawn on the canvas are automatically given anti-aliasing to lessen the visual effect of "jaggies". This anti-aliasing also makes the line appear blurry.
If you ONLY are drawing horizontal and vertical lines you can make them crisp:
Before drawing the lines, context.translate(0.50,0.50),
Draw the lines using only integer coordinates,
After drawing the lines, context.translate(-0.50,-0.50),
If you are drawing non-horizontal and non-vertical lines, then you can use Bresenhan's Line Algorithm to draw crisp lines on the canvas by drawing lines pixel-by-pixel. This previous Q&A has example code using Bresenhan's algorithm.
Let say I got the sprite to the left and I want to apply a red filter over the image before drawing it in a canvas so it looks like the sprite to the right. http://puu.sh/6dQ0E.png
Is there a way to do that?
It could be done in two steps, but I don't know if it's possible to draw the geometric figure that has the exact same shape than the image. (Ex: Drawing a rectangle over it won't match.)
Note: I want the filter to only be applied to this image, not the whole canvas.
You can combine 2 filtering operations to draw the red filter only on top of your existing sprite.
globalCompositeOperation="source-atop" will cause new drawings to only draw on top of existing non-transparent pixels.
globalAlpha will make your new drawings semi-transparent.
Taken together, you can draw a semi-transparent filter that only fills where your non-transparent ghost exsits.
Then just draw a red rectangle over your existing sprite (the rectangle will only be visible inside the existing ghost).
ctx.drawImage(ghostSprites,0,0);
ctx.globalAlpha=0.62;
ctx.globalCompositeOperation="source-atop";
ctx.fillStyle="red";
ctx.fillRect(spriteX,spriteY,spriteWidth,spriteHeight);
Demo: http://jsfiddle.net/m1erickson/W4XrG/
From here...
Notice the black outlines of your sprite become washed from the red filter.
You could also use context.getImageData to grab only the black pixels of your ghost. Then redraw those black pixels over your red-filtered ghost so the black outlines are not washed. If you feel ambitious, you could give that a try!
Good luck with your project!
Here’s code
<style>
body{ background-color: ivory; padding:20px;}
#canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var img=new Image();
img.onload=start;
img.crossOrigin="anonymous";
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/temp0a.png";
function start(){}
var spriteX=0;
var spriteY=0;
var spriteWidth=133;
var spriteHeight=161
$("#recolor").click(function(){
ctx.drawImage(img,0,0);
ctx.globalAlpha=0.62;
ctx.globalCompositeOperation="source-atop";
ctx.fillStyle="red";
ctx.fillRect(spriteX,spriteY,spriteWidth,spriteHeight);
});
}); // end $(function(){});
</script>
</head>
<body>
<p>Before</p>
<img src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/temp0a.png">
<p>After</p>
<button id="recolor">Click to recolor the green sprite</button><br>
<canvas id="canvas" width=300 height=161></canvas>
</body>
</html>
I'm trying to implement pixel perfect collision detection in my canvas game, however I can't seem to get the pixel information from my sprites.
I need the x and y values for each pixel of the sprite, and from what I've read I use the getImageData() method to do that.
However, this doesn't work:
this.sprite = new Image();
this.sprite.src = 'img/player.png';
console.log(this.sprite.getImageData());
Am I maybe using the wrong type of sprite? Because I get this error in the console:
Uncaught TypeError: Object # has no method
'getImageData'
Here’s how to use a sprite’s pixel data to do pixel-perfect hit-testing
First, draw your sprite normally on your visible canvas.
Create a red-masked copy of the sprite on a hidden canvas. This copy is the exact size as the sprite but contains only transparent or red pixels.
Track the visible sprite’s bounding box. When the bounding box is clicked calculate the X/Y of the mouseclick in relation to the sprite’s bounding box (not in relation to the canvas).
Then, refer to the red-masked sprite and see if the corresponding pixel at that X/Y is red or transparent. If the pixel is red, you have a pixel-perfect hit. If the pixel is transparent, no hit.
In this illustration, assume the blue dots are the X/Y click position. Since the corresponding X/Y pixel in the red-masked canvas is “red”, this is a HIT.
Here is code to create a red-masked sprite. I don’t show the code for hit-testing here, but if you try and can’t code the hit-test, I’ll take the time to code up the hit-testing too.
Important note: to get this code to run, you must avoid the cross-domain security restriction. Be sure your image source is on your local domain, otherwise you will run into a cross domain security violation and the masking image will not be drawn…So you can't do this for your sprite source: http://otherDomain.com/picture.jpg!
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; padding:10px; }
canvas{border:1px solid blue;}
</style>
<script>
$(function(){
var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
var img=new Image();
img.onload=function(){
ctx.drawImage(this,100,25);
// make a red-masked copy of just the sprite
// on a separate canvas
var canvasCopy=document.getElementById("canvasCopy");
var ctxCopy=canvasCopy.getContext("2d");
canvasCopy.width=this.width;
canvasCopy.height=this.height;
ctxCopy.drawImage(img,0,0);
// make a red-masked copy of the sprite on a separate canvas
var imgData=ctxCopy.getImageData(0,0,c.width,c.height);
for (var i=0;i<imgData.data.length;i+=4)
{
if(imgData.data[i+3]>0){
imgData.data[i]=255;
imgData.data[i+1]=0;
imgData.data[i+2]=0;
imgData.data[i+3]=255;
}
}
ctxCopy.putImageData(imgData,0,0);
}
img.src = "houseIcon.png";
}); // end $(function(){});
</script>
</head>
<body>
<p>Original sprite drawn on canvas at XY:100/25</p>
<canvas id="canvas" width="400" height="300"></canvas>
<p>Red-masked on canvas used for hit-testing</p>
<canvas id="canvasCopy" width="300" height="300"></canvas>
</body>
</html>
To do pixel-perfect collision testing between 2 sprites, you would:
Create a red-masked canvas for both sprite#1 and sprite#2.
First test if the bounding boxes of the 2 sprites are colliding. If the bounding boxes are not colliding, the 2 sprites are not colliding, so you can stop the hit-test here.
If the 2 sprites are possibly colliding using the bounding boxes test, create a third canvas for the collision test.
You’re going to use canvas’s compositing method to test for a collision between sprite#1 and sprite#2 by drawing both sprite#1 and sprite#2 onto the third canvas. Using compositing, only the COLLIDING pixels of the 2 sprites will be drawn on the third canvas.
Here’s how Compositing with “destination-in” works: The existing canvas content is kept where both the new shape (sprite#2) and existing shape (sprite#1) content overlap. Everything else is made transparent.
So…
Draw sprite#1 in its transformed state into the third canvas (transforms could be move, rotate, scale, skew--anything!).
Set the globalCompositeOperation to destination-in.
context.globalCompositeOperation = 'destination-over';
Draw sprite#2 in its transformed state into the third canvas.
After this draw, the third canvas contains only the colliding portions of sprite#1 and sprite#2
Test each pixel in the third canvas for non-transparent pixels. If you find any non-transparent pixels, the 2 sprites ARE COLLIDING.
Depending on what action you want to take upon collision, you might just bail out when you find the first colliding pixel.
I'm inserting an image into my canvas with this:
ctx.drawImage(myImageObject, 0, 0);
it works perfectly, except the image I insert has some parts of it as transparent and canvas seems to ignore this and it just prints what should be transparent as white pixels.
Here is the image I am inserting: http://i44.tinypic.com/25ymq.gif
I researched this problem abit and some people fixed it by doing ctx.getImageData(0, 0, width, height).data and then iterating through that array replacing pixels manually for transparency. I also read that this is bad practise because its slow (and my sprite sheets could be 1000 x 1000 and so this WOULD be very slow).
Is it possible to do something to make the transparency in my gif show up? When I saved it in photoshop and when I look at the gif itself I can see the transparency, but as soon as I stick it in a canvas it stops being transparent.
edit: I just tried another gif and the transparency works, but in the one above it does not, could there possibly be a problem with the above gif?
Works fine for me with that image and the following code in the latest Firefox and Chrome beta on Mac. (Except the image itself has a few white non-transparent pixels, which you can see by opening on a dark background e.g. in Firefox.)
<!DOCTYPE HTML>
<html>
<head>
<script type="application/x-javascript">
var canvas, ctx;
function init() {
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
var size=500;
ctx.fillStyle = 'yellow';
ctx.beginPath();
ctx.fillStyle = 'yellow';
ctx.moveTo(0,0);
ctx.lineTo(size,0);
ctx.lineTo(size,size);
ctx.lineTo(0,size);
ctx.lineTo(0,0);
ctx.stroke();
ctx.fill();
var img = document.getElementById("img");
ctx.drawImage(img, 0, 0);
}
</script>
</head>
<body onload="init();">
<canvas id="canvas" width="500" height="500"></canvas>
<img id="img" src="test.gif" style="position:absolute; top:500px"></img>
</body>
</html>