If I have done image masking with the canvas element, how can I apply CSS to the mask it self, and not the hole canvas? Is it not possible?
I´m trying to do a portfolio with triangle shaped images. When I hover over an image I want a little colored field to show some text along the bottom line of the triangle.
I have done image masking with the canvas element in order to get the triangle shapes. So my question is how to apply css to the triangle shaped mask? I can only make it so it applies to the hole canvas but since the image is a triangle I need the pop up field to be cut off outside the mask like the pictures are.
I´m a newbie so I´m sorry if it´s a stupid question:)
Here is my code so far:
HTML:
<body>
<h3>Masks</h2>
<ul id="portfolio">
<li><canvas id="canvas01" width="400" height="330"><img src="canvas01.png" id="image01" class="image" alt="" /></canvas><div>First</div></li>
<li><canvas id="canvas02" width="400" height="330"><img src="canvas02.png" id="image02" class="image" alt="" />Second</canvas></li>
<li><canvas id="canvas03" width="400" height="330"><img src="canvas03.png" id="image03" class="image" alt="" />Third</canvas></li>
</ul>
</body>
Javascript:
function masks() {
var canvas01 = document.getElementById("canvas01");
if (canvas01.getContext) {
var ctx = canvas01.getContext("2d");
//Load the image.
var img = document.getElementById("image01");
ctx.fillStyle = "#f30";
ctx.beginPath();
ctx.moveTo(canvas01.width / 2, 0);
ctx.lineTo(canvas01.width, canvas01.height);
ctx.lineTo(0, canvas01.height);
ctx.closePath();
ctx.clip();
ctx.drawImage(img,0,0);
}
var canvas02 = document.getElementById("canvas02");
if (canvas02.getContext) {
var ctx = canvas02.getContext("2d");
//Load the image.
var img = document.getElementById("image02");
ctx.fillStyle = "#f30";
ctx.beginPath();
ctx.moveTo(canvas02.width / 2, 0);
ctx.lineTo(canvas02.width, canvas02.height);
ctx.lineTo(0, canvas02.height);
ctx.closePath();
ctx.clip();
ctx.drawImage(img,0,0);
}
var canvas03 = document.getElementById("canvas03");
if (canvas03.getContext) {
var ctx = canvas03.getContext("2d");
//Load the image.
var img = document.getElementById("image03");
ctx.fillStyle = "#f30";
ctx.beginPath();
ctx.moveTo(canvas03.width / 2, 0);
ctx.lineTo(canvas03.width, canvas03.height);
ctx.lineTo(0, canvas03.height);
ctx.closePath();
ctx.clip();
ctx.drawImage(img,0,0);
}
};
You can't apply CSS to the mask on the canvas.
Your triangle is not a DOM object you can manipulate.
Your triangle is just a bunch of pixels drawn on the canvas.
However canvas is capable of drawing your 3 labeled triangular images
The reusable function below takes in:
The context of the canvas you want to draw on
The image object you want to draw+clip
The text you want to draw at the bottom of the triangle
If you supply text, the bottom red bar and text will be drawn.
If you don't supply text, the bar and text will not be drawn.
Therefore, you could toggle the text on/off in response to mouse hovers.
Here's the code for the one function that will draw all 3 of your triangles
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 code and a Fiddle: http://jsfiddle.net/m1erickson/S9vS8/
<!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 img=new Image();
img.onload=function(){
draw(ctx,img,"Hello!");
}
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/sky-bg2.jpg";
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);
}
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
[Here's code without the jquery]
<!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(){
draw(ctx,img,"Hello!");
}
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/sky-bg2.jpg";
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);
}
}
}; // end window.onload
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
Related
<hmtl>
<head>
<!--<script src='main.js'></script>-->
</head>
<body>
<canvas id='myCanvas'> </canvas>
<script>
function shape(x,y){
this.x=x;
this.y=y;
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect( this.x, this.y, 50, 50);
}
}
var sqr=new shape(100,100)
sqr.x+=100
</script>
</body>
</hmtl>
why i add 100 to x and hope its positon will be (200,100) but when i open live sever it position still remain (100,100)
Because it will only change the value of x, you have to draw it again on the canvas and before drawing again we have to clear canvas using clearRect
<html>
<head>
<!--<script src='main.js'></script>-->
</head>
<body>
<canvas id='myCanvas'> </canvas>
<script>
function shape(x,y){
this.x=x;
this.y=y;
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
this.draw = ()=>{
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#FF0000";
ctx.fillRect( this.x, this.y, 50, 50);
ctx.stroke();
}
}
var sqr=new shape(100,100)
sqr.draw();
sqr.x+=-100
sqr.draw();
</script>
</body>
</html>
I am struggling to make this canvas drawing to zoom in and out and panning it. There are some examples with panning and zooming images but my case is different and I don't know what or how should I do it in my case cause it is not images. I would appreciate any tips or any library that you could suggest?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
canvas{border:#666 1px solid;}
</style>
<script type="application/javascript" language="javascript">
window.onload=draw;//execute draw function when DOM is ready
function draw(){
//assign our canvas element to a variable
var canvas=document.getElementById('canvas1');
//create the html5 context object to enable draw methods
var ctx=canvas.getContext("2d");
ctx.beginPath();
ctx.arc(150, 200, 20, 0, 2 * Math.PI);
ctx.fill();
ctx.beginPath();
ctx.moveTo(150,200);
ctx.lineTo(230,75);
ctx.stroke();
ctx.beginPath();
ctx.arc(230, 75, 20, 0, 2 * Math.PI);
ctx.fill();
ctx.beginPath();
ctx.moveTo(230,75);
ctx.lineTo(300,200);
ctx.stroke();
ctx.beginPath();
ctx.arc(300,200, 20, 0, 2 * Math.PI);
ctx.fill();
ctx.beginPath();
ctx.moveTo(300,200);
ctx.lineTo(150,200);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(300,200);
ctx.lineTo(225,300);
ctx.stroke();
ctx.beginPath();
ctx.arc(225,300, 20, 0, 2 * Math.PI);
ctx.fill();
//fillStyle (r, g, b, alpha)
//ctx.fillStyle = "rgba(0,200,0,1)";
//fillRect (X, Y, Width, height)
//ctx.fillRect(36,10,220,120);
}
</script>
</head>
<body>
<center>
<canvas id="canvas1" width="800" height="600" ></canvas>
</body>
</html>
This is a screenshot of my drawing that I am trying to make it zoom in mouse cursor:
canvas drawing
Panzoom (https://github.com/timmywil/panzoom) says that it supports panning and zoom basically any HTMLElement, including a canvas:
Panzoom uses CSS transforms to take advantage of hardware/GPU
acceleration in the browser, which means the element can be anything:
an image, a video, an iframe, a canvas, text, WHATEVER.
If you're okay with buttons instead of "drag to pan", you can use translate method for panning. You can also use save() and restore() methods or following approach. Here's what I used in similar situation, but I've used buttons:
<html>
<head>
<script>
window.onload = function() {
scale = 1;
canvas = document.getElementById("canvas"); //Replace with id of your canvas
ctx = canvas.getContext("2d");
ctx.translate(150, 75);
drawcanvas();
}
function drawcanvas() {
ctx.beginPath();
//call to function(s) which draws necessary things
//..
//..
drawarrow(ctx);
ctx.stroke();
}
function clearcanvas() {
let current_transform = ctx.getTransform();
ctx.setTransform(1.1, 0, 0, 1.1, 0, 0);
ctx.clearRect(0, 0, canvas.width*scale, canvas.height*scale);
ctx.setTransform(current_transform);
}
function zoomin() {
clearcanvas();
scale = 1.1;
ctx.scale(scale, scale);
drawcanvas();
}
function zoomout() {
clearcanvas();
scale = 1.0/1.1;
ctx.scale(scale, scale);
drawcanvas();
}
function moveleft() {
clearcanvas();
ctx.translate(-10, 0);
drawcanvas();
}
function moveright() {
clearcanvas();
ctx.translate(10, 0);
drawcanvas();
}
</script>
</head>
<body>
<canvas id="c" class="container h-75" style="border: solid 1px blue"></canvas><br />
<button onclick="zoomin()" class="btn btn-dark">+</button>
<button onclick="zoomout()" class="btn btn-dark">-</button>
<button onclick="moveleft()" class="btn btn-dark"><-</button>
<button onclick="moveright()" class="btn btn-dark">-></button>
</body>
</html>
EDIT: I found better solution for panning problem, check this question and it's accepted answer.
Hey guys i have the below design to create
Now i usually use a image in such a situation ,but was just wondering if this was possible in any other way I.E. maybe canvas ? I have just started learning canvas , so i can't say for certain.
FIDDLE HERE
HTML:
<div class='bnr'></div>
<div class='main'></div>
CSS:
.bnr {
height: 35vh;
background: #990853;
}
.main {
background: #fff;
height: 80vh;
}
Now how do i add those curved lines apart from using an image ?
Thank you.
<body onload="draw();">
<canvas id="canvas" width="985px" height="300px" ></canvas>
</body>
<script>
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(10,10);
ctx.lineTo(985,10);
ctx.lineTo(985,245);
ctx.quadraticCurveTo(965,270,965,280);
ctx.quadraticCurveTo(920,130,640,150);
ctx.quadraticCurveTo(530,160,350,190);
ctx.quadraticCurveTo(210,220,10,190);
ctx.lineTo(10,10);
ctx.stroke();
ctx.strokeStyle="#FFF";
ctx.fillStyle = "green";
ctx.fill();
ctx.beginPath();
ctx.moveTo(10,10);
ctx.lineTo(985,10);
ctx.lineTo(985,220);
ctx.quadraticCurveTo(965,230,955,255);
ctx.quadraticCurveTo(920,130,640,135);
ctx.quadraticCurveTo(510,140,350,170);
ctx.quadraticCurveTo(190,200,10,160);
ctx.lineTo(10,10);
ctx.stroke();
ctx.strokeStyle="#FFF";
ctx.fillStyle = "#990853";
ctx.fill();
ctx.beginPath();
ctx.arc(805, 150, 50, 0, 2 * Math.PI);
ctx.stroke();
ctx.strokeStyle="#FFF";
ctx.fillStyle = "#FFF";
ctx.fill();
ctx.beginPath();
ctx.arc(805, 150, 45, 0, 2 * Math.PI);
ctx.stroke();
ctx.strokeStyle="#FFF";
ctx.fillStyle = "#ce758b";
ctx.fill();
}
}
</script>
That how it looks with the previous code :
You can use canvas for obtain exaclty what you want. Use fill for background color and curve.
You can learn more about canvas:
canvas : http://www.w3schools.com/html/html5_canvas.asp
curve : http://www.w3schools.com/tags/canvas_beziercurveto.asp and http://www.w3schools.com/tags/canvas_quadraticcurveto.asp
fill : http://www.w3schools.com/tags/canvas_fill.asp
a lot of tutorial : http://www.html5canvastutorials.com/
Try my demo:
https://jsfiddle.net/pjxgLkm7/2/
Or
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.bezierCurveTo(0,50,20,50,200,0);
ctx.fillStyle = "#990853";
ctx.fill();
ctx.strokeStyle = '#990853';
ctx.stroke();
<canvas id="myCanvas" style="width:100%"></canvas>
Alright so ive looked around and found a code that will successfulyl enable me to draw a circle on canvas and use that circle as a mask for my image.
The code looks like this: (codus to the real creater that i dont know)
var ctx = document.getElementById('your_canvas').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="/path/to/image.jpg";
Lets assume I want to have 5 different circles all with different images and all and each positioned differently.
Anyone got an idea on how id go about that?
To keep the code short, create a function with parameters for the settings that will change from image to image.
Reusable function:
function drawImageCircle(ctx, circleX, circleY, radius,
imageX, imageY, imageWidth, imageHeight, imageUrl) {
var img = new Image();
img.onload = function(){
ctx.save();
ctx.beginPath();
ctx.arc(circleX, circleY, radius, 0, Math.PI*2, true);
ctx.clip();
ctx.drawImage(this, imageX, imageY, imageWidth, imageHeight);
ctx.restore();
};
img.src = imageUrl;
}
var ctx = document.getElementById('your_canvas').getContext("2d");
drawImageCircle(ctx, 100,100, 50, 0,0, 200,300, 'image1.jpg');
drawImageCircle(ctx, 400,400, 50, 300,300, 200,300, 'image2.jpg');
The use of save() and restore() is important when doing this more than once.
Yep, pretty much what Matt said...
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/Vu2Fm/
You can improve this code by using an image preloader to load all 5 of your images prior to drawing on the canvas.
<!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 img1=new Image();
img1.onload=function(){
var img2=new Image();
img2.onload=function(){
// draw a clipping circle and then an image to clip
ctx.save();
ctx.beginPath();
ctx.strokeStyle="blue";
ctx.arc(100, 100, 50, 0 , 2 * Math.PI, false);
ctx.stroke();
ctx.clip();
ctx.beginPath();
ctx.arc(100, 100, 50, 0 , 2 * Math.PI, false);
ctx.drawImage(img1,10,0);
ctx.restore();
// draw a second clipping circle and then an image to clip
ctx.save();
ctx.beginPath();
ctx.strokeStyle="green";
ctx.arc(275, 100, 75, 0 , 2 * Math.PI, false);
ctx.stroke();
ctx.clip();
ctx.beginPath();
ctx.drawImage(img2,150,0);
ctx.restore();
}
img2.src="http://dl.dropbox.com/u/139992952/coffee.png";
}
img1.src="http://dl.dropbox.com/u/139992952/house%20vector.png";
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=400 height=250></canvas>
</body>
</html>
Is there a way to rotate the existing content of HTML5 canvas by Javascript? I know it's possible to rotate an image that will be drawn on to canvas, but I want to rotate the content that has been drawn on to canvas, for example, a 200x200 corner of a 400x400 canvas, or any specific region of an existing canvas.
Same question to scale the existing canvas content...
I know getImageData/putImageData provide a potential to transform the pixel array, but it's just too slow and inefficient.
It's pretty easy to do with a temp canvas.
Live Demo
Live Demo Animated (just for the heck of it)
The above example draws 2 boxes, then rotates and scales from 0,0 to 200,200
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d");
canvas.width = canvas.height = 400;
// fill the canvas black, and draw 2 boxes
ctx.fillStyle = "#000";
ctx.fillRect(0,0,400,400);
ctx.fillStyle = "rgb(255,0,0)";
ctx.fillRect(10,10,190,190);
ctx.fillStyle = "rgb(255,255,0)";
ctx.fillRect(250,250,90,90);
// Create a temp canvas to store our data (because we need to clear the other box after rotation.
var tempCanvas = document.createElement("canvas"),
tempCtx = tempCanvas.getContext("2d");
tempCanvas.width = canvas.width;
tempCanvas.height = canvas.height;
// put our data onto the temp canvas
tempCtx.drawImage(canvas,0,0,canvas.width,canvas.height);
// Append for debugging purposes, just to show what the canvas did look like before the transforms.
document.body.appendChild(tempCanvas);
// Now clear the portion to rotate.
ctx.fillStyle = "#000";
ctx.fillRect(0,0,200,200);
ctx.save();
// Translate (190/2 is half of the box we drew)
ctx.translate(190/2, 0);
// Scale
ctx.scale(0.5,0.5);
// Rotate it
ctx.rotate(45*Math.PI/180);
// Finally draw the image data from the temp canvas.
ctx.drawImage(tempCanvas,0,0,200,200,10,10,190,190);
ctx.restore();
If you first want to draw on a canvas and then rotate it for use on e.g. corners, you can to that when you "clone" the canvas or by using CSS.
Examples
Get the first canvas element:
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
draw on it:
ctx.fillStyle = 'blue';
ctx.fillRect(0,0, 25, 5);
ctx.fill();
ctx.fillStyle = 'red';
ctx.fillRect(25, 0, 25, 5);
ctx.fill();
clone it to another canvas (that is rotated by CSS):
var ctx2 = document.getElementById("canvas2").getContext("2d");
ctx2.drawImage(canvas, 0,0);
or rotate the canvas while you "clone" it:
var ctx3 = document.getElementById("canvas3").getContext("2d");
ctx3.rotate(Math.PI/2);
ctx3.translate(0,-50);
ctx3.drawImage(canvas, 0,0);
here is the CSS for rotating it:
#canvas2 {
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform:rotate(90deg);
-ms-transform:rotate(90deg);
}
Here is the full example:
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = 'blue';
ctx.fillRect(0,0, 25, 5);
ctx.fill();
ctx.fillStyle = 'red';
ctx.fillRect(25, 0, 25, 5);
ctx.fill();
var ctx2 = document.getElementById("canvas2").getContext("2d");
ctx2.drawImage(canvas, 0,0);
var ctx3 = document.getElementById("canvas3").getContext("2d");
ctx3.rotate(Math.PI/2);
ctx3.translate(0,-50);
ctx3.drawImage(canvas, 0,0);
}
</script>
<style>
#canvas2 {
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform:rotate(90deg);
-ms-transform:rotate(90deg);
}
</style>
</head>
<body>
<canvas id="canvas" width="50" height="50"></canvas>
<canvas id="canvas2" width="50" height="50"></canvas>
<canvas id="canvas3" width="50" height="50"></canvas>
</body>
</html>