I want to develop an online game in JavaScript, except I need a way to change the RGB value of a single pixel. Anyone know how to do this?
Thanks
The canvas people are referring to is the HTML5 canvas tag: http://www.w3schools.com/HTML/html5_canvas.asp This is the main component used for creating animations and graphics in modern online games using JavaScript. Here is a good starting point: http://msdn.microsoft.com/en-us/library/ie/gg589490(v=vs.85).aspx
If you want to change the color of single pixel using a canvas you simply would draw a pixel by 1 pixel rectangle at a location. For example:
<html>
<body>
<canvas id="myCanvas" width="200" height="200" style="border:1px solid #c3c3c3;"></canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(100,100,1,1);
</script>
</body>
</html>
Related
I am using fabricjs 1.5 and I am stuck on 1 thing. I want to show the preview of the canvas to the user on click of button and I can not come up with a proper solution. Some things that crossed my mind are:
Save the current canvas state and then render it on the other canvas
Create a temporary image save function and then show this image
But I want to know if there is any specific function in the fabricjs that can help me achieve this. I did some R&D and could not find anything and hence I have not tried anything.
Use canvas.toDataURL() to get the image of canvas, and set it to image source.
DEMO
var canvas = new fabric.Canvas('c');
canvas.add(new fabric.Circle({radius:100,fill:'red'}))
function setPreview(){
document.getElementById('img').src = canvas.toDataURL();
}
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<button onclick="setPreview()">Preview</button><br>
<canvas id="c" width="200" height="200" style="border:1px solid #ccc"></canvas>
<br>
<img id='img'/>
I know this question has already been asked several times, however, I haven't
found a solution yet.
I want to take an image, rotate it and put it in a HTML canvas, to do this I'm using another canvas in which I rotate the image, this part works well, however, when I try to take the image from the second canvas using .toDataUrl, it returns a blank image. The code is the following
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<canvas id=canvas height="400" width="400" style="border: 10px solid orange"></canvas>
<canvas id=canvasTransform height="183" width="183" style="border: 10px solid orange"></canvas>
<script type="text/javascript">
//this is the canvas in which I want to put the rotated image
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
//and I use this one to rotate it
var canvasTransform=document.getElementById('canvasTransform');
var contextTransform=canvasTransform.getContext("2d");
var image=new Image(46,183);
image.onload=function(){
contextTransform.drawImage(image,0,0);
}
image.src="Fireball.png";
console.log(image.src);
//Now I rotate the context
contextTransform.rotate(-0.25*Math.PI);
//After doing this, I can see the rotated image in the second canvas, however, the following line returns a blank image
var rotatedImageURL=canvasTransform.toDataURL();
console.log(rotatedImageURL);
//Finally, this part isn't wornking since I just draw a blank image
var rotatedImage=new Image();
rotatedImage.onload=function(){
context.drawImage(rotatedImage,0,0);
}
rotatedImage.src=rotatedImageURL;
</script>
</body>
</html>
I have been stuck here for a while, so any help is appreciated. Thanks in advance!
You likely need to wait until after drawing the image before calling toDataURL. The fireball is only drawn after the image is loaded but the rotate (and everything after that) is called right after registering the onload event handler (but before it has actually loaded).
Am newbie to html5. I want to include some mouse over function through css or javascript so that when i mouse over particular bar it has to display some message. I dont want to go for some api. pls help me out. Here is my code.
<!doctype html>
<html>
<head>
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById('mycanvas');
var ctx=canvas.getContext('2d');
var value=[180,140,30,340,50,90];
var width=50;
var currx=30;
ctx.fillStyle="red";
var i = 0;
var interval = setInterval(function(){
if (i == value.length){
clearInterval(interval);
return;
}
var h=value[i];
ctx.fillRect(currx,canvas.height-h,width,h);
currx+=width+10;
i++;
}, 2000);console.log(interval);
};
</script>
</head>
<body>
<canvas id="mycanvas" height="400" width="400" style="border:1px solid #c3c3c3;">
</body>
</html>
Demo on jsFiddle
You have two options:
Use a library like KineticJS which abstracts the drawable shapes into objects and provides nifty methods for binding them to mouse events. This has the benefit of minimizing the work required by your side, therefore allowing you to concentrate on the functionality itself, and not reinventing the wheel.
Roll your own solution, much like someone does when he/she created a library like the one mentioned above. Design some abstraction for your shapes (in this instance some kind of a Bar object) that encompasses the relevant features (notably the x,y,w,h) and on canvas mousemove-event, bruteforce through all your bars and calculate whether or not the event mouse position is within a bar or not. Then act accordingly, e.g. redraw the bar in new color. Of course you'll have to handle mouseout as well (to color it back and the like).
Please help me:
create clickable regions in the canvas below that I can assign onmousedown= events to. I know how to do this with invisible DIVs, but I think there is a more elegant way to do it in canvas that I don't know.
when I click one of the regions, want to pass an image name to a function so that it changes the image being displayed to another image, and then changes it back onmouseup.
if you show me just one region and one mousedown/mouseup example I can do the rest...thanks.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<canvas id="myCanvas" width="506" height="319" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=new Image();
img.onload = function(){
ctx.drawImage(img,0,0);
};
img.src="firstImage.gif";
</script>
/////////HERE NEED/////////
CREATE CLICKABLE REGION <region>
<region>
onmousedown=changeCanvasImage(secondImage.gif) //change image on click
onmouseup=changeCanvasImage(firstImage.gif) /change it back when done
</region>
</body>
</html>
The canvas element can fire events but graphical elements within the canvas cannot. To do this you'll either need to implement it yourself by detecting the position of the mouse on the canvas when it is clicked and relating the value to something in your canvas, or using one of the many canvas libraries available which will handle the detection for you.
Is there a javascript library which lets me draw on a web page and then save the state of that drawing?
I want to draw an 2D image using the mouse and then how to store and load that drawing
Use HTML5 Canvas. A simple example for drawing images is here: http://jsfiddle.net/ghostoy/wTmFE/1/.
I recommend this online book: Dive Into HTML5.
You should look at ProcessingJS.
If you want the free drawing to work with touchscreens, I recommend Fabric.js:
Demo
Tutorial
Code:
<canvas id="c1" width="100" height="100" style="border:1px solid black;">
</canvas>
var canvas = new fabric.Canvas('c1');
canvas.isDrawingMode = true;
canvas.freeDrawingBrush.width = 5;
console.log(canvas);
See JSfiddle