i have 2 images on my stage underneath an overlay image of 2 frames. The user can drag each image as if they were positioninng each image inside a photo frame. The problem i have is the yoda image in this example can overlap and appear inside the darth vader frame on the left (and vice-versa), as shown here:
jsfiddle here:
http://jsfiddle.net/vTLkn/
Is there a way of placing the images inside some form of container or rectangle to stop this so they cannot appear inside another 'frame'?
The final page could end up having up to 5 or 6 frames and images with each image able to be scaled up or down as well as being dragged by the user anywhere they want (i had looked at the dragBoundsFunc but i don't actually want to restrict where they place it just stop the overlapping.
I also tried using a rectangle as an image mask and the image as the fillPatternImage attribute but i cannot then drag and scale the image inside then, just the rectangle itself.
You can use a Kinetic Group plus “yoda cropping” to be sure your images don’t overlap
First create a Group that will contain both the picture frame and the Yoda:
If you need to drag or scale, you would drag or scale the Group (all contained elements would react accordingly)
var group=new Kinetic.Group({
x:20,
y:20,
width:256,
height:256,
draggable:true
})
layer.add(group);
Then add Yoda image which has been cropped to fit in the picture frame.
Since this Yoda image in in the background (lower z-index), any slight overlap with the picture frame will be hidden by the larger picture frame.
Here, the Yoda would be bigger than the picture frame, so it needs to be cropped a bit.
var inner=new Kinetic.Image({
image:Yoda,
x:44,
y:44,
width:168,
height:162,
crop:{
x: 23,
y: 38,
width: 168,
height: 162
}
});
group.add(inner);
Finally, add the picture frame which will be scaled to fit in the group using width/height:
var outer=new Kinetic.Image({
image:pictureFrame,
x:0,
y:0,
width:256,
height:256,
});
group.add(outer);
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/qGHZn/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prototype</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.4.min.js"></script>
<style>
#container{
border:solid 1px #ccc;
margin-top: 10px;
width:400px;
height:400px;
}
</style>
<script>
$(function(){
var stage = new Kinetic.Stage({
container: 'container',
width: 400,
height: 400
});
var layer = new Kinetic.Layer();
stage.add(layer);
var group=new Kinetic.Group({
x:20,
y:20,
width:256,
height:256,
draggable:true
})
layer.add(group);
//////////////////////////
// START
//////////////////////////
var frame=new Image();
frame.onload=function(){
var pic=new Image();
pic.onload=function(){
var inner=new Kinetic.Image({
image:pic,
x:44,
y:44,
width:168,
height:162,
crop:{
x: 23,
y: 38,
width: 168,
height: 162
}
});
group.add(inner);
var outer=new Kinetic.Image({
image:frame,
x:0,
y:0,
width:256,
height:256,
});
group.add(outer);
layer.draw();
}
pic.src="http://www.html5canvastutorials.com/demos/assets/yoda.jpg";
}
frame.src="woodenframe.png";
}); // end $(function(){});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
Related
Im trying to do a composite operation on layers using KineticJS.
Everything works fine in Chrome, but nothing shows for firefox, or IE10
The code runs through without any errors.
You can see the issue here:
http://clients.lilodesign.com/Lilo/Kinetic/
Chrome you should see a circle with a partial bit of the standard MS Blue Trees image showing through. In Firefox and IE10 you just get a blank screen.
You can view the code by viewing the source. Its all in-line and a very simple example to show the issue.
If you remove the following line:
ctx.globalCompositeOperation = "destination-atop";
Then you see the blue trees image with the ellipse on top of it as expected in all three browsers, so the code does "work".
Has anyone else experienced this and found a workaround?
I have searched and tried a couple of suggested solutions such as:
shape intersection with KineticJS
But all these still only seem to work in Chrome.
Any help or pointers would be appreciated.
Thanks
Tyrone.
We used to be able to cheat by grabbing the context of a layer, but now it’s unreliable (as you’ve discovered).
You can still get verrrrry hacky and do it like this: : http://jsfiddle.net/m1erickson/6fTQU/
But don’t ! (Even this hack doesn’t actually work on images with transparent pixels).
Instead, do it the official way by creating a Kinetic custom Shape Object.
Kinetic Shape gives you an official canvas and context to work with.
As a result, the globalCompositeOperation works fine (reliably!).
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/LtxEe/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prototype</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.1.min.js"></script>
<style>
body{ background-color: ivory; }
#container{
border:solid 1px #ccc;
margin-top: 10px;
width:300px;
height:300px;
}
</style>
<script>
$(function(){
var stage = new Kinetic.Stage({
container: 'container',
width: 300,
height: 300
});
var layer = new Kinetic.Layer();
stage.add(layer);
var img=new Image();
img.onload=function(){
buildLayer(img);
}
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/KoolAidMan.png";
function buildLayer(img){
var myShape=new Kinetic.Shape({
drawFunc:function(canvas){
var ctx=canvas.getContext();
ctx.beginPath();
ctx.drawImage(img,0,0);
ctx.globalCompositeOperation="destination-atop";
ctx.arc(150,150,60,0,Math.PI*2,false);
ctx.closePath();
ctx.fill();
canvas.fillStroke(this);
},
x:0,
y:0,
width:img.width,
height:img.height
});
layer.add(myShape);
layer.draw();
}
}); // end $(function(){});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
I need to set up a background canvas with a load of images drawn on at various places. Nothing changes on this background, so I want to do it all at once. I think I know how to do that. Then each frame I want to copy that background canvas (ultimately just a part of it) to my main screen canvas people see.
I am doing the following:
g_CanvasScreen = document.getElementById("m_Canvas");
g_CanvasScreenContext = g_CanvasScreen.getContext("2d");
g_OffScreenBackground = document.createElement("canvas");
g_OffScreenBackgroundContext = g_CanvasScreen.getContext("2d");
I believe this gets the main screen canvas from the hmtl5 page g_CanvasScreen.
I believe g_OffScreenBackground is a newly created canvas in memory.
Once all images have loaded I then draw all the images in the correct places to the background screen by calling the function:
DrawMapToBackground(g_OffScreenBackground, g_OffScreenBackgroundContext, 2000, 1600);
2000 x 1600 is the size of the offscreen background.
This then leads to the thing I am not sure about. I believe this will blit the background canvas to the main screen:
g_CanvasScreenContext.drawImage(g_OffScreenBackground,
0, 0, g_OffScreenBackground.width, g_OffScreenBackground.height,
screenX, screenY, g_OffScreenBackground.width, g_OffScreenBackground.height);
Is this last function correct? Can I do a canvas to canvas blit? Should I be doing this another way?
Instead of redrawing the background each time, just put 2 canvas’s on top of each other.
First draw the background image once on the bottom canvas.
Then use the top canvas to draw all your “changing” drawings.
Here’s code and a Fiddle: http://jsfiddle.net/m1erickson/pSjEt/
<!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>
#container{
position:relative;
border:1px solid blue;
width:500px;
height:300px;
}
.subcanvs{
position:absolute;
width:100%;
height:100%;
}
</style>
<script>
$(function(){
var bk=document.getElementById("background");
var bkCtx=bk.getContext("2d");
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var bkimg=new Image();
bkimg.onload=function(){
bk.width=bkimg.width;
bk.height=bkimg.height;
canvas.width=bkimg.width;
canvas.height=bkimg.height;
bkCtx.drawImage(bkimg,0,0);
draw();
}
bkimg.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/skyGrass.png";
var x=50;
function draw(){
x+=5;
if(x>300){x=50;}
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.beginPath();
ctx.arc(x,100,30,0,Math.PI*2,false);
ctx.strokeStyle="gold";
ctx.fillStyle="yellow";
ctx.lineWidth=5;
ctx.stroke();
ctx.fill();
setTimeout(draw,1000);
}
}); // end $(function(){});
</script>
</head>
<body>
<div id="container">
<canvas id="background" class="subcanvs"></canvas>
<canvas id="canvas" class="subcanvs"></canvas>
</div>
</body>
</html>
I'm also curious to know if this is a best practice.
I load a sprite map:
canvas = $('#GameCanvas')[0];
context = canvas.getContext('2d');
// load sprite map
spriteMap = new Image();
spriteMap.src = "resources/spritemap.png";
Now I've loaded my sprites, I want to draw them on the screen. I can do so by using context.drawImage(..) but:
I don't know if this is the best way, instead of just extracting each image I want and storing them separately eg. var playerCharacter = [cut the image out of the sprite map]
I want to colorise the images. If I pull out a 'white' sprite, I may then want to colorise it red, green, etc. I don't know how to do this yet, but it will probably require creating a new colorised Image so I'd have to pull it out of the spritemap anyway. I don't want to be recolorising constantly.
Any idea the best way of doing this?
Performance using sprites
Phrogz has some useful FPS tests for CSS vs Canvas here: Efficiency of <canvas> and <div>s They are live tests so you can run them in the environments you want to test.
Recoloring sprites
If you want to quickly take your white sprite and create red, green and blue sprites from it, you can use globalCompositeOperation=”source-in” to do that with very little work. Just use an image editor to create a cutout of the part of the image you want to recolor. Then use the code below to automatically create different colored sprites. I did the mask below in Photoshop using the magic want tool – 2 minutes tops!
Original Fish + Mask = Green Fish
Of course, you can create any color you want...even patterns instead of solid colors!
Here’s code. You will probably have to create your own image and mask because of CORS – stupid CORS !!
<!doctype html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
canvas{border:1px solid red;}
#wrapper{ position:relative;}
#overlay,#base{ position:absolute; top:0; left:0;}
</style>
<script>
$(function(){
var canvas=document.getElementById("overlay");
var ctx=canvas.getContext("2d");
var img=new Image();
img.onload=function(){
ctx.drawImage(img,0,0,img.width,img.height,0,0,overlay.width,overlay.height);
}
img.src="http://dl.dropbox.com/u/139992952/stackoverflow/fish%20overlay.png";
function draw(red,green,blue) {
ctx.save();
ctx.globalCompositeOperation = 'source-in';
ctx.fillStyle="rgb("+red+","+green+","+blue+")";
ctx.beginPath();
ctx.rect(0,0,overlay.width,overlay.height);
ctx.fill();
ctx.restore();
}
$("#red").click(function(){ draw(255,0,0); });
$("#green").click(function(){ draw(0,255,0); });
$("#blue").click(function(){ draw(0,0,255); });
});
</script>
</head>
<body>
<button id="red">Red Fish</button>
<button id="green">Green Fish</button>
<button id="blue">Blue Fish</button>
<div id="wrapper">
<img id="base" src="http://dl.dropbox.com/u/139992952/stackoverflow/fish.png" width=350 height=250>
<canvas id="overlay" width=350 height=250></canvas>
</div>
</body>
</html>
What I have so far: http://sem.serialshop.nl/video/
My goal is to manipulate the video pixels to show corresponding information inside the pupil when hovering one of the buttons. Can I delete the pixels inside the pupil, and replace it with an image?
Removing pixels from an mp4 video—removing pixels of an eye pupil
As darma says, you can probably finish your project by just using context.drawImage() to superimpose your image over the pupil. Here's how you do that.
Also, here's how you would remove the pixels of the pupil (as you asked).
Background
You can take an mp4 video and draw it frame-by-frame into a canvas.
The canvas drawing rate is quick enough that the results look as good as the video they were taken from.
More interestingly, you can manipulate each frame as it’s drawn into the canvas. This allows you to take the pixels of the pupil and replace them.
Manipulating pixels:
You manipulate the canvas frame by using context.getImageData() to grab the pixels into a data array.
Then you manipulate the data array in whatever way you wish.
Finally, you put the modified data array back into the canvas using context.putImageData().
The canvas then shows the modified pixels!
Your Solution
To solve your problem, we get the bounding-box containing the pupil. Every time we see a nearly-black pixel in that bounding box, we know it’s the pupil and we can modify that nearly-black pixel. In the following working code, we just change the pixel from nearly-black to pure red. However, you can do whatever you desire to the pupil pixels.
Here is code to draw the video with the pupil pixels colored red:
<!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; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var centerX=315;
var centerY=150;
var radius=10;
var rx=267;
var ry=98;
var rwidth=101;
var rheight=95;
var video = document.getElementById('vid');
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var cw = 638;
var ch = 358;
canvas.width = cw;
canvas.height = ch;
video.addEventListener('play', function(){
draw(this,ctx,cw,ch);
},false);
function draw(video,context,w,h) {
if(video.paused || video.ended) return false;
context.drawImage(video,0,0,w,h);
// at this point you could also draw a second image
// into the pupil of the eye like this
// context.drawImage(myImage,rx,ry,rwidth,rheight);
// but what we do here is just put a red bounding box
// around the pupil so that we can see we are
// properly focusing on the pupil area
context.fillStyle="blue";
context.strokeStyle="red";
context.lineWidth=2;
context.beginPath();
context.rect(rx,ry,rwidth,rheight);
context.stroke();
extractPupil(context);
setTimeout(draw,150,video,context,w,h);
}
function extractPupil(context){
// get just the bounding rectangle of the pupil
// NOT the whole canvas.
var imgData=context.getImageData(rx,ry,rwidth,rheight);
var data=imgData.data;
for(var i=0;i<data.length;i+=4){
// if the pixel color is nearly black--change it to red
if(data[i]<20 && data[i+1]<20 && data[i+2]<20){
data[i]=255;
data[i+1]=0;
data[i+2]=0;
}
}
// put the modified pixels back into the canvas
// Now the pupil is colored pure red!
context.putImageData(imgData,rx,ry);
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas"></canvas>
<video id="vid" controls loop>
<source src="eye.mp4" type=video/mp4>
</video>
</body>
</html>
I am working with some image manipulations and I am trying to have a basic canvas and I have a text box now If I enter any text it should change immediately on the canvas and I need that text to move on the canvas and record it's X and Y positions.So how do I do that?
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
var drawLogo = function () {
var canvas = document.getElementById('my_canvas');
var context = canvas.getContext('2d');
context.font = 'italic 40px sans-serif';
context.textBaseline = 'top';
context.fillText('Some text', 60, 0);
};
$(function () {
var canvas = document.getElementById('my_canvas');
if (canvas.getContext) {
drawLogo();
}
});
</script>
</head>
<body>
<canvas id="my_canvas" width="900" height="300">
Fallback content here
</canvas>
<input id="Text1" type="text" />
</body>
</html>
First, everytime the text changes you'll need to re-draw the ENTIRE canvas.
Do this:
Add a myText, x & y inputs to your drawLogo function: drawLogo(myText, x, y) and change this line to context.fillText(myText, x, y);
To change text on the canvas, add a JS event handler to the textbox and call the new drawLogo function passing all 3 input parameters.
Keep in mind that you cannot modify what's drawn on a Canvas. You can only draw it once so all modifiers have to be done in one pass.
The moving part is not clear but you'll need to calculate your equations of motion in JS beforehand. When you call the new drawLogo(myText, x, y) you'll pass these values from JS.
Watch out for this line context.textBaseline = 'top'; as last time I checked it wasn't supported in Firefox.