I have created a triangle shaped image mask with the Canvas element. I have a field of text which I want to display at the bottom line of this triangle when mouse over. I can´t figure out how to make the text display only when hovering.
I am a beginner at this... Any help appriciated!
This is the code I got so far:
HTML code:
<body>
<canvas id="canvas" width=300 height=300></canvas>
</body>
Javascript:
function masks() {
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var img=new Image();
img.onload=function(){
draw(ctx,img,"Hello!");
}
img.src="canvas01.png";
function draw(ctx,img,text){
ctx.beginPath();
ctx.moveTo(canvas.width / 2, 0);
ctx.lineTo(canvas.width, canvas.height);
ctx.lineTo(0, canvas.height);
ctx.closePath();
ctx.clip();
ctx.drawImage(img,0,0);
if(text){
ctx.fillStyle = "#f30";
ctx.fillRect(0,canvas.height-20,canvas.width,20);
ctx.fillStyle = "black";
ctx.font="14pt Verdana";
var textWidth=ctx.measureText(text).width;
ctx.fillText(text,(canvas.width-textWidth)/2,canvas.height-3);
}
}
};
Here's how...
You can draw your text when the user's mouse is over the canvas element using:
canvas.addEventListener("mouseover",function(){
draw(ctx,img,"Hello!");
});
You can clear the text when the user's mouse has moved outside the canvas element using:
canvas.addEventListener("mouseout",function(){
draw(ctx,img);
});
Note that your draw function now clears the canvas in preparation for redrawing:
function draw(ctx,img,text){
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.save();
ctx.beginPath();
ctx.moveTo(canvas.width / 2, 0);
ctx.lineTo(canvas.width, canvas.height);
ctx.lineTo(0, canvas.height);
ctx.closePath();
ctx.clip();
ctx.drawImage(img,0,0);
if(text){
ctx.fillStyle = "#f30";
ctx.fillRect(0,canvas.height-20,canvas.width,20);
ctx.fillStyle = "black";
ctx.font="14pt Verdana";
var textWidth=ctx.measureText(text).width;
ctx.fillText(text,(canvas.width-textWidth)/2,canvas.height-3);
}
ctx.restore();
}
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/Q4TKC/
<!doctype html>
<html>
<head>
<style>
body{ background-color: ivory; padding:10px; }
#canvas{border:1px solid lightgray;}
</style>
<script>
window.onload=function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var img=new Image();
img.onload=function(){
canvas.addEventListener("mouseover",function(){
draw(ctx,img,"Hello!");
});
canvas.addEventListener("mouseout",function(){
draw(ctx,img);
});
draw(ctx,img);
}
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/sky-bg2.jpg";
function draw(ctx,img,text){
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.save();
ctx.beginPath();
ctx.moveTo(canvas.width / 2, 0);
ctx.lineTo(canvas.width, canvas.height);
ctx.lineTo(0, canvas.height);
ctx.closePath();
ctx.clip();
ctx.drawImage(img,0,0);
if(text){
ctx.fillStyle = "#f30";
ctx.fillRect(0,canvas.height-20,canvas.width,20);
ctx.fillStyle = "black";
ctx.font="14pt Verdana";
var textWidth=ctx.measureText(text).width;
ctx.fillText(text,(canvas.width-textWidth)/2,canvas.height-3);
}
ctx.restore();
}
}; // end window.onload
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
Related
I want to create a circle and cut out a part of it if it goes outside another shape.
For example, if half of the circle goes outside a square, cut out everything on the outside but not on the inside. Something like this snippet, except the part outside the square is hidden. I prefer to avoid masking it since this will go on top of another canvas, which covers the whole screen.
Code
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d");
ctx.rect(20,20,100,100);
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.arc(70, 90, 60, 0, Math.PI * 2, false)
ctx.stroke();
ctx.restore();
<html>
<body>
<canvas id="canvas"></canvas>
</body>
</html>
You can clip() the circle, like so;
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d");
ctx.rect(20,20,100,100);
ctx.stroke();
ctx.closePath();
ctx.clip(); // clip circle
ctx.beginPath();
ctx.arc(70, 90, 60, 0, Math.PI * 2, false)
ctx.stroke();
ctx.restore();
<html>
<body>
<canvas id="canvas"></canvas>
</body>
</html>
This is the dimensions I've adjusted for cropping the outside part of sqaure
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d");
ctx.rect(20,20,100,100);
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.arc(70, 90, 60, 10, -4*Math.PI * .05 , false)
ctx.stroke();
ctx.restore();
<html>
<body>
<canvas id="canvas"></canvas>
</body>
</html>
So basically the javascript draws two triangles, one with a blue border and the second with a green border. I have a button that when is pushed it should fill the triangle with a blue border blue.
Currently it does not work but when the {} are removed from the if statement at the bottom it colors the green bordered triangle green, im not sure why this happens.
Any tips would be very helpful!
window.onload = draw;
function draw() {
var canvas = document.getElementById('myCanvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.beginPath();
ctx.strokeStyle = "blue";
ctx.moveTo(600, 0);
ctx.lineTo(500, 200);
ctx.lineTo(700, 200);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = "green";
ctx.moveTo(500, 210);
ctx.lineTo(700, 210);
ctx.lineTo(600, 410);
ctx.closePath();
ctx.stroke();
}
}
function fillColor() {
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
if (ctx.strokeStyle == "blue") {
ctx.beginPath();
ctx.fillStyle = "blue";
ctx.fill();
}
}
<canvas id="myCanvas" width="700" height="410"></canvas>
You cannot compare rectangles with the stroke color.You need to change your fillColor function a little bit . Please see the below code it may help you
HTML
<body>
<canvas id="myCanvas" width="700" height="410"></canvas>
</body>
Javascript
<script>
window.onload = draw;
function draw() {
var canvas = document.getElementById('myCanvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.beginPath();
ctx.strokeStyle = "blue";
ctx.moveTo(600, 0);
ctx.lineTo(500, 200);
ctx.lineTo(700, 200);
ctx.closePath();
ctx.stroke();
fillColor(ctx,'blue');
ctx.beginPath();
ctx.strokeStyle = "green";
ctx.moveTo(500, 210);
ctx.lineTo(700, 210);
ctx.lineTo(600, 410);
ctx.closePath();
fillColor(ctx,'red');
}
}
function fillColor(ctx,color) {
ctx.fillStyle = color;
ctx.fill();
}
You need to call the fillColor() function after creating each rectangle with the color to fill.
I am attempting to animate an emoticon that was previously drawn in canvas. I am attempting to do a draw and clear using frames following a tutorial but am not getting results. I have 6 frames of the emoticon coded and am unsure how to include this within the code. This is what I have so far:
<!DOCTYPE html>
<html>
<head>
<title>Adding Animation</title>
<style>
canvas {
border: 3px #CCC solid;
}
</style>
</head>
<body>
<div id="container">
<canvas id="myCanvas" height="1200" width="900"></canvas>
</div>
<script>
var mainCanvas = document.querySelector("#myCanvas");
var mainContext = mainCanvas.getContext("2d");
var canvasWidth = mainCanvas.width;
var canvasHeight = mainCanvas.height;
function drawCircle() {
mainContext.clearRect(0, 0, canvasWidth, canvasHeight);
// color in the background
mainContext.fillStyle = "#EEEEEE";
mainContext.fillRect(0, 0, canvasWidth, canvasHeight);
// draw the circle
ctx.beginPath();
ctx.strokeStyle = "000000";
ctx.lineWidth = 5;
ctx.fillStyle = "yellow";
ctx.arc(600, 450, 150, 0, Math.PI * 2, true);
ctx.stroke();
ctx.closePath();
ctx.fill();
//The smile
ctx.beginPath();
ctxstrokeStyle = "black";
ctx.lineWidth = 2;
ctx.arc(600, 475, 75, .1 * Math.PI, Math.PI * .9, false)
ctx.stroke();
ctx.closePath();
//The eyes
//Left
ctx.save();
ctx.scale(0.65, 1);
ctx.beginPath();
ctx.arc(850, 405, 40, 0 * Math.PI, Math.PI * 2, false);
ctx.fillStyle="black";
ctx.fill();
ctx.stroke();
ctx.closePath();
ctx.restore();
//Right
ctx.save();
ctx.scale(0.65, 1);
ctx.beginPath();
ctx.arc(1000,405,40, 0*Math.PI, Math.PI*2, false);
ctx.fillStyle="black";
ctx.fill();
ctx.stroke();
ctx.closePath();
ctx.restore()
}
drawCircle();
</script>
</body>
</html>
I am unsure if I am even on the right track as I have a difficult time with animation. Does anyone have any suggestions they can give me guidance on?
You have 2 names for the context: mainContext & ctx.
Change it to a single name and your face is "smiley" ! :-)
...
To animate:
Use a requestAnimationFrame loop to change the scaleY value in scale(scaleX,scaleY) over time.
Here's annotated code and a Demo:
var mainCanvas = document.querySelector("#myCanvas");
var ctx = mainCanvas.getContext("2d");
var canvasWidth = mainCanvas.width;
var canvasHeight = mainCanvas.height;
ctx.translate(-425,-275);
drawCircle(1);
// global var to hold pct the left eye is open
// 1==fully open, 0==fully closed
var scaley=1;
var direction=-1;
// request 1 animate() loop
requestAnimationFrame(animate);
function animate(time){
// draw smiley with the specified eye openness
drawCircle(scaley);
scaley+=.02*direction;
if(scaley<0){
scaley=0;
direction=1;
}
if(scaley>1){
scaley=1;
direction=-1;
}
requestAnimationFrame(animate);
}
function drawCircle(scaleY) {
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
// color in the background
ctx.fillStyle = "#EEEEEE";
ctx.fillRect(0, 0, canvasWidth, canvasHeight);
// draw the circle
ctx.beginPath();
ctx.strokeStyle = "000000";
ctx.lineWidth = 5;
ctx.fillStyle = "yellow";
ctx.arc(600, 450, 150, 0, Math.PI * 2, true);
ctx.stroke();
ctx.closePath();
ctx.fill();
//The smile
ctx.beginPath();
ctxstrokeStyle = "black";
ctx.lineWidth = 2;
ctx.arc(600, 475, 75, .1 * Math.PI, Math.PI * .9, false)
ctx.stroke();
//The eyes
//Left
ctx.save();
// move the [0,0] origin to the left eye's centerpoint
ctx.translate(550,405);
// close the left eye by the specified scaleY
ctx.scale(0.65, scaleY);
ctx.beginPath();
// draw the left eye (arc) at 0,0 because
// we translated the origin to [550,405] earlier
ctx.arc(0, 0, 40, 0 * Math.PI, Math.PI * 2, false);
ctx.fillStyle="black";
ctx.fill();
ctx.stroke();
ctx.closePath();
ctx.restore();
//Right
ctx.save();
ctx.scale(0.65, 1);
ctx.beginPath();
ctx.arc(1000,405,40, 0*Math.PI, Math.PI*2, false);
ctx.fillStyle="black";
ctx.fill();
ctx.stroke();
ctx.closePath();
ctx.restore()
}
<canvas id="myCanvas" height="1200" width="900"></canvas>
You never declared a ctx variable.
Change all your mainContext by ctx and it should be working fine.
How can you cut out a circle on a previous drawn canvas in html5?
I tried filling it transparent, and of course it did not work, I can fill it with a color but I really need it to be cut out of the canvas revealing the layer beneath.
This is what I tried.
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "rgba(0, 0, 0, 0)";
context.fill();
and
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "rgba(255, 255, 255, 1)";
context.fill();
You can use compositing to do a 'reveal' of an image underneath the canvas.
Position a canvas directly over an image using CSS positioning.
Fill the top canvas with a solid color.
Listen for mousedown events.
In the event handler, set compositing to 'destination-out' which will use any new drawings to "cut" out any existing pixels.
Draw on the canvas (causing the img underneath to be revealed where the new drawings were drawn.
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var $canvas=$("#canvas");
var canvasOffset=$canvas.offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var radius=30;
ctx.fillStyle='skyblue';
ctx.fillRect(0,0,canvas.width,canvas.height);
function cut(x,y,radius){
ctx.save();
ctx.globalCompositeOperation='destination-out';
ctx.beginPath();
ctx.arc(x,y,radius, 0, 2 * Math.PI, false);
ctx.fill();
ctx.restore();
}
function handleMouseDown(e){
e.preventDefault();
e.stopPropagation();
x=parseInt(e.clientX-offsetX);
y=parseInt(e.clientY-offsetY);
cut(x,y,radius);
}
$("#canvas").mousedown(function(e){handleMouseDown(e);});
body{ background-color: ivory; }
#canvas{border:1px solid red;}
#wrapper{position:relative;}
#bk,#canvas{position:absolute;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Click on the canvas to cut a circle<br>and reveal the img underneath.</h4>
<img id=bk src='https://dl.dropboxusercontent.com/u/139992952/stackoverflow/KoolAidMan.png'>
<canvas id="canvas" width=300 height=300></canvas>
Working on a venn diagram creation in canvas. I'm attempting to have different colors for each intersection and each circle. While I can do this with overlapping circles, I need to have each intersection be it's own piece so I can manipulate colors for each as I will be doing this on hover.
The problem is that I can get all sections complete but the final overlap. Here's an image of the existing solution: venn diagram image. Need to mark/show the overlap from the yellow and blue circles without effecting the bottom circle overlaps. Here's what I have so far (I realize this isn't the cleanest, working on simplifying):
<script>
window.LENS = {};
LENS.init = function(){
var self = this;
this.canvas = document.getElementById('canvas');
this.ctx = canvas.getContext('2d');
this.width = window.innerWidth;
this.height = window.innerHeight;
this.canvas.width = window.innerWidth;
this.canvas.height = window.innerHeight+50; //compensate for margin
this.drawLens(this.ctx, this.width, this.height);
}
LENS.drawLens = function (ctx, windowWidth, windowHeight){
var self = this;
var radius=windowWidth/5.25;
var circle1={x:windowWidth/2.5, y:windowHeight/3, r:radius, color: 'rgb(130,205,240)'};
var circle2={x:windowWidth/1.75, y:windowHeight/3, r:radius, color: 'rgb(255,240,180)'};
var circle3={x:circle1.x+circle1.r/2, y:circle1.y+circle1.r/1.2, r:radius, color: 'rgb(245,120,125)'}; //dividing by 1.2 for visual purposes. radius would be centered, but provides optical illusiion
var intersect1={color:'rgb(0,170,145)'};
var intersect2={color:'rgb(130,70,110)'};
var intersect3={color:'rgb(255,160,75)'};
var intersectCenter={color:'rgb(55,55,55)'};
//draw circle1
//ctx.save(); //important or we lose the context and will hold all drawing
ctx.beginPath();
ctx.arc(circle1.x, circle1.y, circle1.r, 0, 2*Math.PI, false);
ctx.fillStyle=circle1.color;
ctx.strokeStyle=circle1.color;
ctx.stroke();
ctx.fill();
//intersection1 top
ctx.beginPath();
ctx.fillStyle=intersect1.color;
ctx.strokeStyle=intersect1.color;
ctx.globalCompositeOperation='source-atop';
ctx.arc(circle2.x,circle2.y,circle2.r, 0, 2*Math.PI, false);
ctx.fill();
//intersection2 top
ctx.beginPath();
ctx.fillStyle=intersect2.color;
ctx.strokeStyle=intersect2.color;
ctx.globalCompositeOperation='source-atop';
ctx.arc(circle3.x,circle3.y,circle3.r, 0, 2*Math.PI, false);
ctx.fill();
//intersect Center
ctx.beginPath();
ctx.globalCompositeOperation='source-atop'
ctx.arc(circle2.x, circle2.y, circle2.r, 0, 2*Math.PI, false);
ctx.fillStyle=intersectCenter.color;
ctx.strokeStyle=intersectCenter.color;
ctx.stroke();
ctx.fill();
//draw intersection3 bottom
ctx.beginPath();
ctx.fillStyle=intersect3.color;
ctx.strokeStyle=intersect3.color;
ctx.globalCompositeOperation='destination-over';
ctx.arc(circle2.x, circle2.y, circle2.r, 0, 2*Math.PI, false);
ctx.fill();
ctx.stroke();
//intersection 3
ctx.beginPath();
ctx.fillStyle=intersect3.color;
ctx.strokeStyle=intersect3.color;
ctx.globalCompositeOperation='destination-in';
ctx.arc(circle3.x, circle3.y, circle3.r, 0, 2*Math.PI, false);
ctx.fill();
ctx.stroke();
//circle3
ctx.beginPath();
ctx.fillStyle=circle3.color;
ctx.globalCompositeOperation='destination-over';
ctx.arc(circle3.x,circle3.y,circle3.r, 0, 2*Math.PI, false);
ctx.fill();
//redraw circle 1
ctx.beginPath();
ctx.globalCompositeOperation='destination-over';
ctx.arc(circle1.x, circle1.y, circle1.r, 0, 2*Math.PI, false);
ctx.fillStyle=circle1.color;
ctx.strokeStyle=circle1.color;
ctx.stroke();
ctx.fill();
//redraw circle 2
ctx.beginPath();
ctx.globalCompositeOperation='destination-over'
ctx.arc(circle2.x, circle2.y, circle2.r, 0, 2*Math.PI, false);
ctx.fillStyle=circle2.color;
ctx.strokeStyle=circle2.color;
ctx.stroke();
ctx.fill();
}
</script>
You can use an offscreen canvas that uses compositing to create your Venn unions.
If compositing is set to "source-in" then any new drawings will display only where the existing and new drawings overlap. Everything else will be cleared (made transparent).
"source-in" compositing is ideal for drawing Venn unions because only the intersection of 2 circles will survive.
If compositing is set to "destination-out" then any new drawings will clear drawings where the new drawings overlap. (This is like an "erase" action)
This pseudo-code will display the union of your blue and yellow circles (everything but the union will be erased):
Draw the blue circle
Set compositing to "source-in"
Draw the yellow circle
This pseudo-code will display that top blue-yellow union that you're having trouble with:
Draw the blue circle
Set compositing to "source-in"
Draw the yellow circle
Set compositing to "destination-out"
Draw the red circle
Code and a Demo: http://jsfiddle.net/m1erickson/XLhT9/
<!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: white; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var canvas1=document.createElement("canvas");
var ctx1=canvas1.getContext("2d");
var circleBlue={x:50,y:50,r:40};
var circleYellow={x:100,y:50,r:40};
var circleRed={x:75,y:85,r:40};
drawCircle(ctx,circleRed,"salmon");
drawCircle(ctx,circleYellow,"lemonchiffon");
drawCircle(ctx,circleBlue,"lightblue");
$r=$("#r")[0];
$y=$("#y")[0];
$b=$("#b")[0];
$by=$("#by")[0];
$br=$("#br")[0];
$yr=$("#yr")[0];
$byNotR=$("#byNotR")[0];
$brNotY=$("#brNotY")[0];
$yrNotB=$("#yrNotB")[0];
$yrb=$("#yrb")[0];
$r.checked=true;
$y.checked=true;
$b.checked=true;
$(":checkbox").change(function(){drawAll()});
function drawIntersect(a,b,c,notC,color){
ctx1.clearRect(0,0,canvas1.width,canvas1.height);
ctx1.save();
// a
drawCircle(ctx1,a,color);
// b
ctx1.globalCompositeOperation="source-in";
drawCircle(ctx1,b,color);
// c
if(c){drawCircle(ctx1,c,color); }
// notC
ctx1.globalCompositeOperation="destination-out";
if(notC){ drawCircle(ctx1,notC,color); }
ctx1.restore();
ctx.drawImage(canvas1,0,0);
}
function drawCircle(ctx,circle,color){
ctx.beginPath();
ctx.arc(circle.x,circle.y,circle.r,0,Math.PI*2);
ctx.closePath();
ctx.fillStyle=color;
ctx.fill();
}
function drawAll(){
ctx.clearRect(0,0,canvas.width,canvas.height);
if($r.checked){drawCircle(ctx,circleRed,"salmon");}
if($y.checked){drawCircle(ctx,circleYellow,"lemonchiffon");}
if($b.checked){drawCircle(ctx,circleBlue,"lightblue");}
if($by.checked){drawIntersect(circleBlue,circleYellow,null,null,"green");}
if($br.checked){drawIntersect(circleBlue,circleRed,null,null,"blue");}
if($yr.checked){drawIntersect(circleYellow,circleRed,null,null,"red");}
if($byNotR.checked){drawIntersect(circleBlue,circleYellow,null,circleRed,"green");}
if($brNotY.checked){drawIntersect(circleBlue,circleRed,null,circleYellow,"blue");}
if($yrNotB.checked){drawIntersect(circleYellow,circleRed,null,circleBlue,"red");}
if($yrb.checked){drawIntersect(circleYellow,circleRed,circleBlue,null,"black");}
}
}); // end $(function(){});
</script>
</head>
<body>
<input type="checkbox" id="r">Red Circle<br>
<input type="checkbox" id="y">Yellow Circle<br>
<input type="checkbox" id="b">Blue Circle<br>
<input type="checkbox" id="by">Blue+Yellow<br>
<input type="checkbox" id="br">Blue+Red<br>
<input type="checkbox" id="yr">Yellow+Red<br>
<input type="checkbox" id="byNotR">Blue+Yellow-Red<br>
<input type="checkbox" id="brNotY">Blue+Red-Yellow<br>
<input type="checkbox" id="yrNotB">Yellow+Red-Blue<br>
<input type="checkbox" id="yrb">Yellow+Red+Blue<br>
<canvas id="canvas" width=150 height=150></canvas>
</body>
</html>