I want to make an element where the text is transparent and the rest of the div is solid, so that if it's fixed position, you can see through the text to the background.
I'd normally just use an alpha-mapped image for this, however, I need this text to be changed by a user at their whim so that no matter what text is in the element, it will be transparent. The key here though that you can't do with a normal div is having an actual background color on the element that contains the text.
I'm very new to canvas elements, but I'm wondering if it's possible to do with a canvas element, and if so, could you point me in the right direction?
Yes you can do this with canvas .. You can draw a text in canvas with transparency using rgba(red,blue,green,transparency_value)
HTML:
<canvas id="mycanvas" width="200" height="200" style="width:200px; height:200px; border:1px solid;">
</canvas>
Script:
canvas = document.getElementById('mycanvas');
ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.fillStyle = '#992200';
ctx.rect(0,0,canvas.width,canvas.height);
ctx.fill();
ctx.closePath();
ctx.fillStyle = 'rgba(255,255,255,1)';
ctx.font = '10px verdana';
ctx.textAlign = 'center';
ctx.fillText("No transparency",canvas.width/2,10);
ctx.fillStyle = 'rgba(255,255,255,0.5)';
ctx.font = '10px verdana';
ctx.textAlign = 'center';
ctx.fillText("This is Transparent[0.5]",canvas.width/2,canvas.height/2);
ctx.fillStyle = 'rgba(255,255,255,0.25)';
ctx.font = '10px verdana';
ctx.textAlign = 'center';
ctx.fillText("This is Transparent[0.25]",canvas.width/2,canvas.height - 10);
Live Demo
Note: Setting rgba() should be a string ( Mean should be enclosed in quotes )
See about fillText()
See about fillStyle
See about textAlign
You can also do it with compositing: http://jsfiddle.net/m1erickson/9DLuT/
<!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-image:url("http://images4.fanpop.com/image/photos/23400000/water-water-23444632-2048-1277.jpg"); }
canvas{border:1px solid red; position:absolute}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.save();
ctx.beginPath();
ctx.fillStyle="black";
ctx.rect(0,0,canvas.width,canvas.height);
ctx.fill();
ctx.font="144pt Verdana";
ctx.globalCompositeOperation="xor";
ctx.beginPath();
ctx.fillText("See",30,200);
ctx.fill();
ctx.restore();
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=400 height=300></canvas>
</body>
</html>
You could also consider SVG clipping masks which is much simpler and doesn't suffer from the 'black box' syndrome that is canvas.
I'm trying to writing you something for specifically your problem.
In the meantime you might find this article will help.
http://demosthenes.info/blog/481/Text-Clipping-Masks-With-SVG
Related
What is the trick with canvas scale discrepancy? I used canvas scale model for example 10 px by 10 px, draw it, but actually when I checked it (counting exactly amount of pix in the row) - its more then 10 px, its about 15px !!!
Here is the code html:
<div id="canvasDiv">
<canvas id="canvasSignature" width="10px" height="10px" ></canvas>
</div>
For JS:
var c = document.getElementById("canvasSignature");
var ctx = c.getContext("2d");
ctx.fillStyle = '#FD0';
ctx.fillRect(0, 0, 10, 10);
Do I need to adjust some scale (calibrating) for browser or something else ?
Full code:
<!DOCTYPE html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="canvas.css">
</head>
<body>
<h1>Canvas 100px * 100px</h1>
<div id="canvasDiv">
<canvas id="canvasSignature" ></canvas>
</div>
<input type="button" value = "Draw" onclick=ClearCanv();>
<br>
<script type="text/javascript">
function ClearCanv(){
var c = document.getElementById("canvasSignature");
var ctx = c.getContext("2d");
//context.clearRect(0, 0, canvas.width, canvas.height);
//ctx.clearRect(0, 0, c.width, c.height);
//ctx.fillRect(10,10,50,50);
//ctx.beginPath();
ctx.fillStyle = '#FD0';
ctx.fillRect(0, 0, 10, 10);
}
</script>
</body>
</html>
Here is CSS:
#canvasDiv {
width: 10px;
height: 10px;
}
I tried solution for Canvas is stretched when using CSS but normal with "width" / "height" properties
It doesn't help!
JSFiddle:
https://jsfiddle.net/neL81ce5/3/
I am new one for canvas.I want to know how to draw a line with scrollable canvas window.my expectation is canvas window fit the screen and if line went to out side of the view port then the canvas window is scrollable until to view the end of the line.i try this code.any idea for this problem.Thank you.
<html>
<head>
<head>
<body>
<canvas id="myCanvas" style="border:1px solid #d3d3d3;float: left;" > Your browser does not support the HTML5 canvas tag.</canvas>
<script>
function draw() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(1500,1000);
ctx.stroke();
}
draw();
</script>
</body>
</html>
You can have the browser add scrollbar(s) by wrapping a taller canvas inside a shorter div and setting the shorter div's overflow:scroll.
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(200,1000);
ctx.stroke();
body{ background-color: ivory; }
#viewport{width:320px;height:150px;border:1px solid blue;overflow:scroll;}
#canvas{border:1px solid red; }
<div id=viewport>
<canvas id="canvas" width=300 height=1500></canvas>
</div>
I want to make simple shapes using HTML.
But the shapes need to be big.
And the canvas is in full screen
Example: http://jsfiddle.net/xLgg43s9/1/embedded/result/
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
* { margin: 0; padding: 0;}
body, html { height:100%; }
#canvas {
position:absolute;
width:100%;
height:100%;
}
</style>
</head>
<body>
<canvas id="canvas">
</canvas>
<script>
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.fillStyle = "#000";
var w=canvas.width;
var h=canvas.height;
ctx.fillRect(0,0,w,h);
ctx.fillStyle="#fff";
ctx.beginPath();
var a=w/2;
var b=0;
ctx.arc(a,b,20,0,Math.PI,false);
ctx.closePath();
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.fillStyle="red";
ctx.fillRect(0,0,10,100);
ctx.stroke();
ctx.save();
ctx.translate(240, 120);
ctx.rotate(Math.PI / 4); // 45 degrees
ctx.fillStyle = "yellow";
ctx.fillRect(-40, -40, 20, 20);
ctx.restore();
</script>
</body>
</html>
Please fix it.
Don't set the canvas's size through CSS, that stretches the canvas element, instead of actually making the canvas larger.
Use HTML attributes, instead:
<canvas id="canvas" width="500" height="500"></canvas>
Now, since you want to set the canvas to 100% width / height, those pre-set attributes aren't going to do the trick for you, you're going to have to use some JS:
var canvas = document.getElementById("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var ctx=canvas.getContext("2d");
// etc...
If you want to have the canvas resize when the window gets resized, I'd suggest you look at this answer.
Html5
<canvas id="myCanvas" width="578" height="200"></canvas>
JavaScript
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(100, 50);
context.lineTo(50, 150);
context.lineTo(150, 150);
context.lineTo(100, 50);
context.stroke();
Here's how to hit test your triangle:
You can define your path (as you've defined your triangle)
Listen for mousemove events and determine the mouse position
Use context.isPointInPath(mouseX,mouseY) to test if your mouse is inside the defined triangle.
Example code and a Demo: http://jsfiddle.net/m1erickson/XL93U/
<!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 context=canvas.getContext("2d");
var $canvas=$("#canvas");
var canvasOffset=$canvas.offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
context.beginPath();
context.moveTo(100, 50);
context.lineTo(50, 150);
context.lineTo(150, 150);
context.lineTo(100, 50);
context.stroke();
function handleMouseMove(e){
e.preventDefault();
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
var inside=context.isPointInPath(mouseX,mouseY);
var text=(inside)?"Inside":"Outside";
$("#results").text(text);
}
$("#canvas").mousemove(function(e){handleMouseMove(e);});
}); // end $(function(){});
</script>
</head>
<body>
<h4 id="results">Move mouse in and out of triangle</h4>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
After I set the canvas in HTML for a certain size, for example, 800x600, the script will not fill for me, but if I set it to be 150x150, it will. Why is it happening? Can it be fixed? Any help would be appreciated.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Let's Draw!</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="script.js"></script>
</head>
<body onload="drawShape();">
<canvas id="my_canvas" width="800" height="600">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
</body>
</html>
Javascript:
function drawShape(){
var canvas = document.getElementById('my_canvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d'); // ctx = context
ctx.fillStyle = "red";
// Filled triangle
ctx.beginPath();
ctx.moveTo(25,25);
ctx.lineTo(105,25);
ctx.lineTo(25,105);
ctx.fill();
// Stroked triangle
ctx.beginPath();
ctx.moveTo(125,125);
ctx.lineTo(125,45);
ctx.lineTo(45,125);
ctx.closePath();
ctx.stroke();
} else {
alert('You need Safari or Firefox 1.5+ to see this demo.');
}
}
800x600 is relatively small and should be supported by all reasonable browsers that support canvas. Canvases 4 times the size should work. What browser/OS are you using?