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>
Related
I want to be able to create diagrams and drawings on the fly, using input from the user.
If I have 2 text boxes for width and height, i want to be able to draw a rectangle based on user entered values, if they change the value in the input fields i want the drawing to change.
is canvas capable of this? does it need to work along with javascript?
thanks
Yes, you can listen for text-inputs and issue appropriate canvas drawing commands.
All canvas commands must be issued in javascript...so yes, javascript is required.
Here's annotated code and a Demo: http://jsfiddle.net/m1erickson/f6E6Y/
<!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(){
// get a reference to the canvas and context
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
// vars for current width and height of a canvas rectangle
var width=50;
var height=35;
// references to the input-text elements
// used to let user change the rect width & height
var $width=document.getElementById('width');
var $height=document.getElementById('height')
// set the initial input-text values to the width/height vars
$width.value=width;
$height.value=height;
// call the draw command
draw();
// listen for keyup events on width & height input-text elements
// Get the current values from input-text & set the width/height vars
// call draw to redraw the rect with the current width/height values
$width.addEventListener("keyup", function(){
width=this.value;
draw();
}, false);
$height.addEventListener("keyup", function(){
height=this.value;
draw();
}, false);
// draw() clears the canvas and redraws the rect
// based on user input
function draw(){
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.fillRect(40,40,width,height);
}
}); // end $(function(){});
</script>
</head>
<body>
Width:<input type="text" id="width"><br>
height:<input type="text" id="height"><br>
<canvas id="canvas" width=300 height=300></canvas>
</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>
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.
I heard that drawing abilities will be supported by Web 2.0
Tried to find something in Internet about, nothing really clear. Could you please point me into something that allows (or will allow in future) to draw in HTML?
For example: I want to have ability draw few hexagons in different color on the page.
Thanks.
P.S. Sorry if question is a little bit "stupid", but I can't make it more smart.
A quick exemple of what you want to do:
<html>
<head>
<title>Hexagon canvas tutorial</title>
<script type="text/javascript">
function draw(){
//first let's get canvas HTML Element to draw something on it
var canvas = document.getElementById('tutorial');
//then let's see if the browser supports canvas element
if (canvas.getContext){
var ctx = canvas.getContext('2d');
//Pick Hexagon color, this one will be blue
ctx.fillStyle = "rgb(0, 0, 255)";
//let's start a path
ctx.beginPath();
//move cursor to position x=10 and y=60, and move it around to create an hexagon
ctx.moveTo(10,60);
ctx.lineTo(40,100);
ctx.lineTo(80,100);
ctx.lineTo(110,60);
ctx.lineTo(80,20);
ctx.lineTo(40,20);
//fill it and you got your first Hexagon
ctx.fill();
//This one will be green, but we will draw it like the first one
ctx.fillStyle = "rgb(0, 255, 0)";
ctx.beginPath();
ctx.moveTo(110,160);
ctx.lineTo(140,200);
ctx.lineTo(180,200);
ctx.lineTo(210,160);
ctx.lineTo(180,120);
ctx.lineTo(140,120);
ctx.fill();
}
}
</script>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body onload="draw();">
<canvas id="tutorial" width="300" height="300"></canvas>
</body>
</html>
What you're talking about is most likely the HTML5 Canvas element
I suspect you've been hearing about the Canvas Element. You can get started with it here: http://en.wikipedia.org/wiki/Canvas_element
Good luck!