Get background color of input range position - javascript

I have an input with type range which has a background colour that is a gradient. I'd like the background colour of the gradient to be outputted to a class where the value of the range currently is at.
For example if the input's range is between 1-100 and the input's value is 1 making it be to the left side of the input the colour to the left will be outputted.
Any help to this question would be much appreciated.

You can draw your gradient on a canvas and use getImageData to get a selected pixel color.
A Demo: http://jsfiddle.net/m1erickson/YaQ6J/
Example code:
<!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;}
#myRange{width:300px;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.font="14px verdana";
var $canvas=$("#canvas");
var canvasOffset=$canvas.offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var x1=0;
var y1=10;
var x2=canvas.width;
var y2=10;
// create a gradient
var gradient=ctx.createLinearGradient(x1,y1,x2,y2);
gradient.addColorStop(0.00,"indigo");
gradient.addColorStop(1.00,"steelblue");
// draw the gradient across the canvas
ctx.fillStyle=gradient;
ctx.fillRect(x1,y1-10,x2-x1,20);
// get the pixel color array for the gradient
var data=ctx.getImageData(x1,y1,canvas.width,1).data;
// get the gradient using a range control
$("#myRange").on("input change",function(){
var value=$(this).val();
var i=value*4;
var r=data[i];
var g=data[i+1];
var b=data[i+2];
var a=data[i+3];
// change the result rectangle to the mouseX color
var fill="rgba("+r+","+g+","+b+","+a+")";
ctx.fillStyle=fill;
ctx.clearRect(0,20,canvas.width,30);
ctx.fillRect(0,25,50,20);
ctx.fillText(fill,75,40);
});
}); // end $(function(){});
</script>
</head>
<body>
<input id="myRange" type="range" min="0" max="299"><br>
<canvas id="canvas" width=300 height=45></canvas>
</body>
</html>

Related

HTML5 Canvas | Pattern to reveal overlayed line art based on pattern pixel color

I need to apply, via canvas element, a one color (black) bitmap image (line art) onto a 2 color (red and yellow) bitmap image (pattern) and have only the red pixels of that pattern be colored by the overlayed line art, kinda like an intersect. I saw this:
https://developer.mozilla.org/en/docs/Web/Guide/HTML/Canvas_tutorial/Compositing (see globalCompositeOperation > Darker method ) and wondered if that effect is what I need. Since that method no longer appears to be supported, is there a way to simulate such an effect? All images used for this only contain spot colors (100% red, 100% yellow, 100% black, 100% white). Any javascript code sample or hint(s) leading to a solution would be awesome. Thx for input.
If you can isolate just the red portion onto a separate image then you can use compositing to recolor where black intersects red.
Otherwise you can grab all the pixel colors on both images using context.getImageData.
Then you can change the red pixels to black where red & black intersect.
Example code and a Demo: http://jsfiddle.net/m1erickson/pcsmbr22/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; margin:20px; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var canvasB=document.getElementById("black");
var ctxB=canvasB.getContext("2d");
var canvasC=document.getElementById("color2");
var ctxC=canvasC.getContext("2d");
ctxB.fillRect(50,50,50,100);
ctxC.fillStyle='yellow';
ctxC.fillRect(75,50,50,50);
ctxC.fillStyle='red';
ctxC.fillRect(75,100,50,50);
var iDataB=ctxB.getImageData(0,0,canvasB.width,canvasB.height);
var dataB=iDataB.data;
var iDataC=ctxC.getImageData(0,0,canvasC.width,canvasC.height);
var dataC=iDataC.data;
// copy yellow-red onto results canvas
ctx.drawImage(canvasC,0,0);
var iData=ctx.getImageData(0,0,canvas.width,canvas.height);
var data=iData.data;
// copy black pixels when intersecting red pixels
for(var i=0;i<dataC.length;i+=4){
var isBlack=(dataB[i]==0 && dataB[i+1]==0 && dataB[i+2]==0 && dataB[i+3]==255);
var isRed=(dataC[i]==255 && dataC[i+1]==0 && dataC[i+2]==0 && dataC[i+3]==255);
if(isBlack && isRed){
data[i]=0;
data[i+1]=0;
data[i+2]=0;
data[i+3]=255;
}
}
ctx.putImageData(iData,0,0);
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="black" width=200 height=200></canvas>
<canvas id="color2" width=200 height=200></canvas>
<canvas id="canvas" width=200 height=200></canvas>
</body>
</html>

Aligning a text relative to the html canvas

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="800" height="450" style="border:1px solid #d3d3d3; background-color:#999999;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
<!--normal canvas code-->
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
<!--code for the text line-->
ctx.font = "42px Arial";
<!--place the words in mid x position and in upper 1/6 of y position-->
var canvasxposition = (c.width/2)-(ctx.fillText.x/2)
var canvasyposition = c.height/6
ctx.fillText("Hello World",canvasxposition,canvasyposition);
</script>
</body>
</html>
I am using a canvas and it will be later used for an image.
I need to align the text in the middle of x position and in top y position (1/6 of total height should be the y position)
I used the above code and found out that the following line has a problem.
I need to know what is wrong with it. I want to see the middle(y axis) of the text, in the middle (y axis) of the canvas.
var canvasxposition = (c.width/2)-(ctx.fillText.x/2)
You can align text from its own horizontal centerpoint using context.textAlign
You can align text from its own vertical centerpoint using context.textBaseline:
// align text from horizontal and vertical centerpoint of text
ctx.textAlign="center";
ctx.textBaseline="middle";
Example code and a Demo: http://jsfiddle.net/m1erickson/nT37D/
<!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 references to canvas and context
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
// crosshairs
ctx.beginPath();
ctx.moveTo(0,canvas.height/6);
ctx.lineTo(canvas.width,canvas.height/6);
ctx.moveTo(canvas.width/2,0);
ctx.lineTo(canvas.width/2,canvas.height);
ctx.stroke();
// align text from horizontal and vertical centerpoint of text
ctx.textAlign="center";
ctx.textBaseline="middle";
// sample text
ctx.font="18px arial";
ctx.fillText("Hello World",canvas.width/2,canvas.height/6);
}); // end $(function(){});
</script>
</head>
<body>
<h4>Align text from horizontal and vertical centerpoint of text</h4>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

Zoom and pan HTML5 canvas - library

I'm trying to implement zooming and panning a canvas which contains a picture.
I found this example http://phrogz.net/tmp/canvas_zoom_to_cursor.html, but the transformations are applied on the picture withing the canvas, not on the canvas itself.
I don't understand the code completely, so I didn't manage to customize it for my needs.
Can someone help me with that?
Or, if you could recommend me some good library suitable for my needs, that would be great.
Thanks.
Check out the transformation methods available on the context object.
Context.scale will allow you to scale your content.
Context.translate will allow you to offset the drawing of your content to create your panning effect.
If you want 2 overlaying canvases to maintain their aspect ratio then you would scale & translate both canvases by the same amount.
Here's example code and a Demo: http://jsfiddle.net/m1erickson/H6UMN/
<!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; }
#wrapper{position:relative;}
canvas{position:absolute; border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var canvas1=document.getElementById("canvas1");
var ctx1=canvas1.getContext("2d");
var $canvas=$("#canvas");
var canvasOffset=$canvas.offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var scrollX=$canvas.scrollLeft();
var scrollY=$canvas.scrollTop();
var cw=canvas.width;
var ch=canvas.height;
var scaleFactor=1.00;
var panX=0;
var panY=0;
var circleX=150;
var circleY=150;
var radius=15;
drawTranslated();
$("#canvas").mousemove(function(e){handleMouseMove(e);});
$("#scaledown").click(function(){ scaleFactor/=1.1; drawTranslated(); });
$("#scaleup").click(function(){ scaleFactor*=1.1; drawTranslated(); });
$("#panleft").click(function(){ panX-=10; drawTranslated(); });
$("#panright").click(function(){ panX+=10; drawTranslated(); });
function drawTranslated(){
ctx.clearRect(0,0,cw,ch);
ctx.save();
ctx.translate(panX,panY);
ctx.scale(scaleFactor,scaleFactor);
ctx.beginPath();
ctx.rect(circleX-radius,circleY-radius,radius*2,radius*2);
ctx.closePath();
ctx.fillStyle="blue";
ctx.fill();
ctx.restore();
ctx1.clearRect(0,0,cw,ch);
ctx1.save();
ctx1.translate(panX,panY);
ctx1.scale(scaleFactor,scaleFactor);
ctx1.beginPath();
ctx1.arc(circleX,circleY,radius,0,Math.PI*2);
ctx1.closePath();
ctx1.fillStyle="red";
ctx1.fill();
ctx1.restore();
}
}); // end $(function(){});
</script>
</head>
<body>
<button id=scaledown>Scale Down</button>
<button id=scaleup>Scale Up</button>
<button id=panleft>Pan Left</button>
<button id=panright>Pan Right</button><br>
<div id=wrapper>
<canvas id="canvas" width=350 height=300></canvas>
<canvas id="canvas1" width=350 height=300></canvas>
</div>
</body>
</html>

Smooth Zooming in Canvas via button instead of mousewheel

I am trying to implement something like a smooth zoom in a Canvas application.
I am already able to zoom to a predefined zoom level using this:
$("#zoomToView").click(function () {
paper.view.zoom=5.0;
});
Most of the examples for smooth zomming pertain to mouse-wheel implementations but I would like to use a button instead that zooms to a pre-defined level and back.
I have the impression that the implementantion has something to do with a FOR loop and some kind of adaptive delay that gets bigger as the loop count increases.
Any ideas?
I am using Paper.js as my canvas library but that should not be a factor in finding a solution.
Here's an example using native canvas, but you can substitute paper.js if desired.
The concept is to continuously run an animation loop that only resizes the image if your button is down.
http://jsfiddle.net/SW5jL/3/
Example code:
<!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 canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
var iw,ih;
var img=new Image();
img.onload=start;
img.src="https://www.w3schools.com/css/img_fjords.jpg";
function start(){
iw=img.width;
ih=img.height;
$("#test").mousedown(function(){ doAnimation=true; });
$("#test").mouseup(function(){ doAnimation=false; });
$("#test").mouseout(function(){ doAnimation=false; });
requestAnimationFrame(animate);
ctx.drawImage(img,cw/2-iw/2,ch/2-ih/2);
}
var scale=1.00;
scaleDirection=0.01;
var minScale=0.50;
var maxScale=1.50;
var doAnimation=false;
function animate(){
requestAnimationFrame(animate);
if(doAnimation){
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.drawImage(img,
0,0,iw,ih,
(cw-iw*scale)/2,(ch-ih*scale)/2,iw*scale,ih*scale
);
scale+=scaleDirection;
if(scale<minScale || scale>maxScale){
scaleDirection*=-1;
scale+=scaleDirection;
}
}
}
}); // end $(function(){});
</script>
</head>
<body>
<button id="test">Animate</button><br>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

Display whole image in circulr shape using Javascript or HTML5

How can I display whole image in circulr shape using Javascript or HTML5. I tried the code below but with this code only part of the image will be converted into circular shape. How can I make the whole display in circular shape?
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style>
<script type="text/javascript" >
</script>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<div id="myCanvas"></div>
<script>
var ctx = document.getElementById('myCanvas').getContext("2d");
ctx.arc(100,100, 50, 0, Math.PI*2,true); // you can use any shape
ctx.clip();
var img = new Image();
img.addEventListener('load', function(e) {
ctx.drawImage(this, 0, 0, 200, 300);
}, true);
img.src="images/hospital_review_profile_placeholder.png";
</script>
</body>
</html>
Instead of using ctx.clip(), you would resize and reposition your image to fit in your circle.
Here is code that will resize your image to its largest size that will fit in the circle.
Then the code positions the resized image properly in the circle.
Here is a Fiddle --- http://jsfiddle.net/m1erickson/s6MzZ/
<!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 canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var radius=50; // circle radius
var fullWidth=200; // actual width of image in pixels
var fullHeight=300; // actual height of image in pixels
var centerX=100; // center X coordinate of the circle
var centerY=100; // center Y coordinate of the Circle
// the image must be resized to fit into the circle
// Call CalcResizedImageDimensions() to get the resized width/height
var size=CalcResizedImageDimensions(radius,fullWidth,fullHeight);
var rectX=centerX-size.width/2; // the X coordinate of the resized rectangle
var rectY=centerY-size.height/2 // the Y coordinate of the resized rectangle
ctx.beginPath();
ctx.arc(centerX,centerY,radius,0,Math.PI*2,true);
// I illustrate with just a rectangle
// you would drawImage() instead
ctx.rect(rectX,rectY,size.width,size.height);
ctx.stroke();
function CalcResizedImageDimensions(r,w,h){
var d=2*r;
var newH=(d*h)/Math.sqrt(w*w+h*h);
var newW=w/h*newH;
return({width:newW,height:newH});
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=200 height=200></canvas>
</body>
</html>

Categories

Resources