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/
Related
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'm a beginner and the code inside the script which is called context.textAlign = "centre"; isn't moving "Sample Text" to the centre of the canvas border which is made by css so am i doing something wrong or am i missing something etc. Thanks
<!doctype html>
<html>
<head>
<title>html5 canvas text</title>
<style>
#testCanvas {
border: 1px solid black;
}
</style>
</head>
<body>
<h1> canvas text </h1>
<canvas id="testCanvas" width="500" height="300">Your browser does not support the canvas element.</canvas>
<script>
window.onload = function() {
var canvas = document.getElementById("testCanvas");
var context = canvas.getContext("2d");
var x = canvas.width / 2;
var y = canvas.height / 2;
context.textAlign = "centre";
context.font = "Bold 60pt Arial";
context.fillStyle = 'rgba(0,0,255,0.5)';
context.fillText("Sample Text", x, y);
context.strokeStyle = "green";
context.lineWidth = 3;
context.strokeText("Sample Text", x, y);
}
</script>
</body>
</html>
Wrong Typo:
It is "center" and not "centre".
<!doctype html>
<html>
<head>
<title>html5 canvas text</title>
<style>
#testCanvas {
border: 1px solid black;
}
</style>
</head>
<body>
<h1> canvas text </h1>
<canvas id="testCanvas" width="500" height="300">Your browser does not support the canvas element.</canvas>
<script>
window.onload = function() {
var canvas = document.getElementById("testCanvas");
var context = canvas.getContext("2d");
var x = canvas.width / 2;
var y = canvas.height / 2;
context.textAlign = "center";
context.font = "Bold 60pt Arial";
context.fillStyle = 'rgba(0,0,255,0.5)';
context.fillText("Sample Text", x, y);
context.strokeStyle = "green";
context.lineWidth = 3;
context.strokeText("Sample Text", x, y);
}
</script>
</body>
</html>
Change your textAlign from centre to center
<!doctype html>
<html>
<head>
<title>html5 canvas text</title>
<style>
#testCanvas {
border: 1px solid black;
}
</style>
</head>
<body>
<h1> canvas text </h1>
<canvas id="testCanvas" width="500" height="300">Your browser does not support the canvas element.</canvas>
<script>
window.onload = function() {
var canvas = document.getElementById("testCanvas");
var context = canvas.getContext("2d");
var x = canvas.width / 2;
var y = canvas.height / 2;
context.textAlign = "center";
context.font = "Bold 60pt Arial";
context.fillStyle = 'rgba(0,0,255,0.5)';
context.fillText("Sample Text", x, y);
context.strokeStyle = "green";
context.lineWidth = 3;
context.strokeText("Sample Text", x, y);
}
</script>
</body>
</html>
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.
A simple problem to most of you however I have an issue with my HTML or JavaScript. I am trying to make some rectangles appear when running the code. I am met with the all to familiar blank screen.
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css/myCanvas.css"/>
<script type="text/javascript" src="../js/rectangles.js">
</script>
<meta charset="UTF-8">
<title>Canvas Example</title>
</head>
<body>
<canvas id="lessonCanvas" width="300" height="300" style="margin:100px;">
<p>This example requires a browser that supports the HTML5 canvas feature.</p>
</canvas>
</body>
</html>
And the JavaScript:
function setupCanvas() {
var canvas = document.getElementById('lessonCanvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.strokeRect(0, 0, 200, 200);
ctx.strokeStyle = 'rgb(255, 0, 0)';
ctx.strokeRect (0.5, 0.5, 100, 100);
ctx.fillRect (20, 20, 100, 100);
ctx.fillStyle = 'rgb(0, 255, 0)'
ctx.fillRect (50, 50, 100, 100);
ctx.clearRect (80, 80, 30, 30);
}
}
Any help for a clueless would be appreciated
You have to actually call setupCanvas
Here's a codepen showing this. As you can see, I just added one line to your code. I hope this is the result you intended
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