I am making a drawing app in fabric.js.
I want to ignore the black area of image to be colored in.
Any suggestions please????
Click the link for image
You can use the image as overlay.Please check here:http://jsfiddle.net/mariusturcu93/s5wxbcde/19/
JS
var canvas = new fabric.Canvas('canvas');
canvas.backgroundColor = "blue";
canvas.isDrawingMode=1;
canvas.setOverlayImage('https://vignette.wikia.nocookie.net/fantendo/images/6/6e/Small-mario.png/revision/latest/scale-to-width-down/381?cb=20120718024112', canvas.renderAll.bind(canvas), {
width: canvas.width,
height: canvas.height
});
HTML
<canvas id="canvas" width="800" height="800"></canvas>
Related
for some reason my html5 canvas is not showing up in the browser.
I am trying to draw a black square its just not loading the browser is just an empty page...
Please help me i dont know whats wrong..
<html>
<head>
<title>setup</title>
</head>
<body>
<canvas id="canvas" width="800" height="800"></canvas>
<script>
var canvas
var canvasContext
window.onload = function() {
canvas = document.getElementById("myCanvas")
canvasContext = canvas.getContext("2d")
canvasContext.fillStyle = "black";
canvasContext.fillRect(0,0,canvas.width,canvas.height)
canvasContext.fillStyle = "red";
canvasContext.fillRect(125, 250, 75, 75)
}
</script>
</body>
</html>
Your canvas 'is' there - it's just a white (empty) blob however.
None of your interactions with it work as you've tried to find it using the ID "myCanvas" rather than just "canvas" which is the ID you used in your HTML.
If you change this line:
canvas = document.getElementById("myCanvas")
to
canvas = document.getElementById("canvas")
It should work for you
This is the answer for the question:
canvas = document.getElementById("canvas");
I'm in the final stretch of the game and when I put the background image, it overlaps the Canvas, how do I fix this? - Google translator
game
game with background
make the image as css background-image of the elements that contains the canvas or make the image absolute with lesser z-index value than the canvas
You can make use of drawImage property of canvas
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var background = new Image();
background.src = "https://cdn0.iconfinder.com/data/icons/is_google_plus_one_icons/256/google_plus_one_-plus-1_canvas.png";
background.onload = function(){
ctx.drawImage(background,0,0, 200, 100);
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
}
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Make use of onload property of image to draw the canvas contents.
I am new to HTML5 and start learning canvas.
Currently, I am using canvas to make some objects rotate. The rectangle I created do move, however, I suffer from a problem, after the object move, some shadows remain as you can see from the image I captured.
I just want to have the rectangle, and not including the blue background clumsy stuff. I try to use different browsers to view this HTML5 document, but same problem comes out. Is this a problem of my computer, or is it a problem of the code? If so, how can I solve it?
I have also attached my source code of rotating rectangle example in jsFiddle: http://jsfiddle.net/hphchan/ogoj9odf/1/
Here is my key code:
In Javascript:
function canvaScript() {
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.translate(200, 200); // fix the origin as center of the canvas
rotating(context);
}
function rotating(context) {
context.clearRect(-50, -100, 100, 200); // why boundaries, shadows exist??
context.rotate(Math.PI/180);
context.fillStyle = '#0000FF';
context.fillRect(-50, -100, 100, 200);
setTimeout(function() {rotating(context)}, 100);
}
In HTML
<body onload="canvaScript()">
<canvas id="myCanvas" width="400" height="400"></canvas>
</body>
Thanks for answering.
This problem probably comes from the anti-aliasing.
You can see it by clearing directly after you drawn your rotated shape :
function canvaScript() {
var context = canvas.getContext('2d');
context.translate(200, 200); // fix the origin as center of the canvas
context.rotate(Math.PI/4);
rotating(context);
}
function rotating(context) {
context.fillStyle = '#0000FF';
context.fillRect(-50, -100, 100, 200);
context.clearRect(-50, -100, 100, 200);
}
canvaScript();
<canvas id="canvas" width="400" height="400"></canvas>
So one solution to workaround this is to clear a slightly larger clearRect than the rect you just drawn.
function canvaScript() {
var context = canvas.getContext('2d');
context.translate(200, 200); // fix the origin as center of the canvas
rotating(context);
}
function rotating(context) {
// clear one extra pixel in all directions
context.clearRect(-51, -101, 102, 202);
context.rotate(Math.PI/180);
context.fillStyle = '#0000FF';
context.fillRect(-50, -100, 100, 200);
setTimeout(function() {rotating(context)}, 100);
}
canvaScript();
<canvas id="canvas" width="400" height="400"></canvas>
I understand that Canvas is as ink dries and each item that is draw is on top.
I'm having a little problem, I have a list of sources of background images
var sources = {
bg: 'images/room-1/bg.png',
rightWall: 'images/room-1/wall-right.png',
leftWall: 'images/room-1/wall-left.png',
beam: 'images/room-1/beam-left.png',
sofa: 'images/room-1/sofa.png'
};
loadImages(sources, function(images) {
context.drawImage(images.bg, 0, 0, 760, 500);
context.drawImage(images.rightWall, 714, 0, 46, 392);
context.drawImage(images.leftWall, 0, 160, 194,322);
context.drawImage(images.beam, 0, 45, 143,110);
context.drawImage(images.sofa, 194, 280, 436,140);
});
This is fine and they order how I like.
My issue is I have an image upload for a user to upload their image into the Canvas.
I am just using an upload box to test the theory, but the idea is the user will upload their image, crop, scale it, using JQuery / PHP and this saves the image. I will then grab this manipulated URL and pull this in, however the problem is that the Canvas is loaded so when i upload an image, it goes on top off the sources image.
I do not want to use multiple Canvas as I need to save this canvas as an image as a whole.
var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);
function handleImage(e){
var reader = new FileReader();
reader.onload = function(event){
var img = new Image();
img.onload = function(){
canvas.width = 760;
canvas.height = 300;
}
img.src = event.target.result;
img.onload = function(){
context.drawImage(img, 0, 0);
};
}
reader.readAsDataURL(e.target.files[0]);
}
Canvas does not have layers.
But you can still get 1 final image with both your background and your user's scaled/rotated foreground.
Since you want to let the user rotate/scale their image but you don't want to affect the background, you will need 2 canvases -- a background canvas and a user canvas.
// HTML
<div id="container">
<canvas id="background" class="subcanvs" width=760 height=300></canvas>
<canvas id="canvas" class="subcanvs" width=760 height=300></canvas>
</div>
// CSS
#container{
position:relative;
border:1px solid blue;
width:760px;
height:300px;
}
.subcanvs{
position:absolute;
}
// JavaScript
// a background canvas
var background=document.getElementById("background");
var bkCtx=background.getContext("2d");
// a foreground canvas the user can rotate/scale
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
Then when the user is done rotating/scaling, drawImage the users canvas to the background canvas.
// combine the users finished canvas with the background canvas
bkCtx.drawImage(canvas,0,0);
// and save the background canvas (now it's combined) as an image
var imageURL=background.toDataURL();
Currently there are are two images I would like to rotate on the canvas, I tried save and restore but didn't work
function SetCanvas()
{
var canvas = document.getElementById('pic1');
if(canvas.getContext)
{
var ctx = canvas.getContext('2d');
// ctx.save();
ctx.rotate(0.5);
var image = new Image();
image.src ='ME.JPG';
image.onload = function(){
ctx.drawImage(image, 90,0,200,100);
};
}
//ctx.restore();
var canvas2 = document.getElementById("pic2");
var image2 = new Image();
image2.src = 'ME2.JPG';
if(canvas2.getContext)
{
image2.onload = function(){
ctx2=canvas2.getContext('2d');
ctx2.drawImage(image2, 0,0,200,100);
};
}
}
<ul id="picsCanvas" style="overflow:hidden;white-space:nowrap; list-style-type:none;">
<li style=" display:inline; float:left" id="first">
<canvas ID="pic1" width="300" height="360" ></canvas>
</li>
<li id="second" style="margin-top:0px; display:inline; float:left; position:absolute ">
<canvas id="pic2" width="300" height="360" style="position:absolute" ></canvas>
</li>
</ul>
Please note that the code might not be correct as it is something I did a while ago, I just want to get an idea of how to do it and if it is possible... thanks for your help.
The images are loading asynchronously. This means that that entire function (minus the onload handlers for the images happens first. Then when the images are loaded, their handlers are called. This happens in a second pass. By the time this happens, you already rotated and restored the canvas, effectively wiping the rotation out.
The simple fix is to rotate and restore the canvas inside each of the image onload handlers.
These two links give a pretty good explanation and example of how to rotate with HTML5 canvas
https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas
https://developer.mozilla.org/en/Canvas_tutorial/Basic_animations
You set the different angles when you rotate (see code example below).
The general gist of it is:
1) save the context
2) transform to, usually, the center of the image
3) rotate
4) transform back
5) draw image
6) restore
In your case, with two images, you need to transform the origin to the second image before you make the second rotation call. Below is a simplified example rotating one image. Get that sorted and then make the second transform/rotate.
Example:
var canvas = document.getElementById("yourCanvas");
var ctx = canvas.getContext("2d");
var angle = 0;
window.setInterval(function(){
angle = angle+1;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.fillStyle = "#FF0000";
// first image
ctx.translate(150,200);
ctx.rotate( angle*Math.PI/180 ); // rotate 90 degrees
ctx.translate(-150,-200);
ctx.fillStyle = "black";
ctx.fillRect(100, 150, 100, 100);
ctx.fill();
ctx.restore();
}, 5);