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>
Related
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.
I'm trying to build a sort of generator which lets you put text over an image. Now it's all working great, but i'm trying to create some thumbnails which let me change the background image of the canvas.
Now this is my first attempt with a canvas and i've tried alot of things, but the closest i've come and where i thought my little piece of code would work was, it's given me 0 errors:
function testbackgroundchange() {
img.src = "background_1.jpg";
ctx.clearRect(0, 0, canvas.width, canvas.height);
document.getElementById('scale').value = 1;
document.getElementById('rotate').value = 0;
x = canvas.width/2 - img.width/2;
y = canvas.height/2 - img.height/2;
ctx.drawImage(img,x,y);
imgTransform();
}
So what i'm trying to here is onclick of a thumbnail, change the background image of the canvas.
I've added an JSFiddle for better understanding of the problem: http://jsfiddle.net/29M7P/1/
If anyone could point me in the right direction that would be great. (sorry i'm a beginner)
You can listen for clicks on your thumbnails with thumbnail.onclick
img1.onclick=function(){changeImage(this);};
img2.onclick=function(){changeImage(this);};
And you can change the canvas image like this:
function changeImage(img){
ctx.clearRect(0,0,cw,ch);
ctx.drawImage(img,0,0);
}
A Demo: http://jsfiddle.net/m1erickson/88n3K/
Code example:
<!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 imgCount=2;
var img1=new Image();img1.crossOrigin="anonymous";img1.onload=start;img1.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-1.jpg";
var img2=new Image();img1.crossOrigin="anonymous";img2.onload=start;img2.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-2.jpg";
function start(){
if(--imgCount>0){return;}
document.body.appendChild(img1);
document.body.appendChild(img2);
img1.onclick=function(){changeImage(this);};
img2.onclick=function(){changeImage(this);};
}
function changeImage(img){
ctx.clearRect(0,0,cw,ch);
ctx.drawImage(img,0,0);
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas><br>
<h4>Click on an image below to drawImage to canvas</h4><br>
</body>
</html>
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>
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
I'm using a html 5 to draw a line on canvas with a button.
Does anybody know why?
<!DOCTYPE html>
<html>
<body onload="">
<canvas id="myCanvas" width="400" height="200" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<button name="draw" onclick="drawLine()">Draw Line</button>
<script type="text/javascript" src="canvashtml5.js" ></script>
</body>
</html>
darwLine function is on the external javascript as canvasHtml5.js:
function drawLine(){
var canvas = document.getElementById(myCanvas);
var context = canvas.getContext("2d");
context.moveTo(0,0);
context.lineTo(300,150);
context.stroke();
}
myCanvas
{
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FFFF00";
ctx.fillRect(0,0,150,75);
}
I forgot to put myCanvas to quot like this: "myCanvas".
this var canvas = document.getElementById(myCanvas); must be like var canvas = document.getElementById("myCanvas");
Alternative:
Add an event listener to your button like so:
document.getElementById('drawLineBtn').addEventListener('click', drawLine, false);
This will cut down on your work in the future. See http://jsfiddle.net/kbXAN/23/