I have a couple questions about the HTML5-Canvas code shown below.
The text does not appear in Firefox 3.6 (it does appear in Chrome.)
Regarding the ctx variable (ctx = c.getContext("2d")), should this variable be reused over and over to create additional rectangles, shapes, etc. on the same canvas, or is it desirable to make new context variables for new rectangles, lines, etc.? (It seems to work both ways, but I'm not clear what is standard practice.)
<!DOCTYPE html>
<html lang="en">
<body>
<canvas id="myCanvas" width="400" height="350">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas");
ctx = c.getContext("2d");
ctx.lineWidth = 5;
ctx.strokeStyle="black";
ctx.strokeRect(10,10,180,75);
ctx.textBaseline = 'Top';
ctx.font = '20px Sans-Serif';
ctx.fillStyle = 'blue';
ctx.fillText ("hello", 30, 50);
</script>
</body>
</html>
The problem seems to be with your call to textBaseline.
In playing with it in JSFiddle, it seems that this is case-sensitive...try making it lower-case: ctx.textBaseline = 'top'
Saved the fiddle link for you: http://jsfiddle.net/NG8Yf/
Related
i am drawing circle using canvas. please check my below code
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();
</script>
</body>
</html>
code is working perfectly. i need to add margin, top of the circle. not for canvas margin. this margin should for only circle.
Clock Demo
You can use context.translate and provide it the X offset and Y offset. So before you draw to the canvas you can set the translate, draw what you want and then reset it if required.
To move the clock downwards you can do this
function drawClock() {
// This will move the clock down by 100 pixels
ctx.translate(0, 100);
drawFace(ctx, radius);
drawNumbers(ctx, radius);
drawTime(ctx, radius);
// This will reset the translate position to 0, 0. If you don't it will begin to move the clock each update
ctx.translate(0, -100);
}
You could set the ctx.translate so it will always be offset, but I'm not sure if you wanted to draw anything else.
I am using mac and updated chrome to 18.0.1025.142.
Now I have a strange problem. In most cases (not always what is weird) method context.createPattern() doesn't work and instead of bitmap filling it's filling with black color.
Yes this is an issues: http://code.google.com/p/chromium/issues/detail?id=113592
I am still looking for a temporary solution on my projects too.
It is a common problem in google chrome and opera , In this case you should create a function that will contain all script of canvas and also create an image pattern in this function . Then you need to call the function at window.onload event or any event , then I think image creatPattern() work well . Just follow the example and try to understand ....
<!DOCTYPE html>
<html>
<body>
<p>Image to use:</p>
<img src="img_lamp.jpg" id="lamp" width="32" height="32">
<p>Canvas:</p>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
window.onload = draw;
function draw() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.clearRect(0, 0, c.width, c.height);
var img = document.getElementById("lamp")
var pat = ctx.createPattern(img, "repeat");
ctx.rect(0, 0, 150, 100);
ctx.fillStyle = pat;
ctx.fill();
}
</script>
</body>
</html>
use your own jpg or png here ... Enjoy !.
I am working with some image manipulations and I am trying to have a basic canvas and I have a text box now If I enter any text it should change immediately on the canvas and I need that text to move on the canvas and record it's X and Y positions.So how do I do that?
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
var drawLogo = function () {
var canvas = document.getElementById('my_canvas');
var context = canvas.getContext('2d');
context.font = 'italic 40px sans-serif';
context.textBaseline = 'top';
context.fillText('Some text', 60, 0);
};
$(function () {
var canvas = document.getElementById('my_canvas');
if (canvas.getContext) {
drawLogo();
}
});
</script>
</head>
<body>
<canvas id="my_canvas" width="900" height="300">
Fallback content here
</canvas>
<input id="Text1" type="text" />
</body>
</html>
First, everytime the text changes you'll need to re-draw the ENTIRE canvas.
Do this:
Add a myText, x & y inputs to your drawLogo function: drawLogo(myText, x, y) and change this line to context.fillText(myText, x, y);
To change text on the canvas, add a JS event handler to the textbox and call the new drawLogo function passing all 3 input parameters.
Keep in mind that you cannot modify what's drawn on a Canvas. You can only draw it once so all modifiers have to be done in one pass.
The moving part is not clear but you'll need to calculate your equations of motion in JS beforehand. When you call the new drawLogo(myText, x, y) you'll pass these values from JS.
Watch out for this line context.textBaseline = 'top'; as last time I checked it wasn't supported in Firefox.
I am working through the HTML5 canvas tutorial on the following website:
Mozilla Developers.
In this tutorial, they say that you can use a canvas element as the backdrop of another canvas element. I have tried to do exactly that with the following html page. Unfortunately, the debugger in chrome says failed to load resource. Am I referencing the source canvas object the correct way in the function draw2()?:
<html>
<head>
<title>CANVAS TESTING</title>
<script type="text/javascript">
function draw()
{
var ctx = document.getElementById('tutorial').getContext('2d');
ctx.translate(0,document.getElementById('tutorial').height);
ctx.scale(1,-1)
// Create gradients
var lingrad = ctx.createLinearGradient(0,0,0,150);
lingrad.addColorStop(0, '#fff');
lingrad.addColorStop(0.5, '#66CC00');
lingrad.addColorStop(0.5, '#fff');
lingrad.addColorStop(1, '#00ABEB');
var lingrad2 = ctx.createLinearGradient(0,50,0,95);
lingrad2.addColorStop(0.25, 'rgba(0,0,0,0)');
lingrad2.addColorStop(0.75, '#000');
// assign gradients to fill and stroke styles
ctx.fillStyle = lingrad;
ctx.strokeStyle = lingrad2;
// draw shapes
ctx.fillRect(10,10,130,130);
ctx.strokeRect(50,50,50,50);
}
function draw2()
{
ctx=document.getElementById('canvas').getContext('2d');
img = new Image();
img.onload = function()
{
ctx.drawImage(img,0,0);
}
img.src = document.getElementById('tutorial');
}
</script>
</head>
<body onload="draw()">
<p>This is a test of canvas element.</p>
<canvas id="tutorial" width="400" height="400" style="background-color: black"></canvas>
<br /><br />
<canvas id="canvas" width="400" height="400" style="background-color: black"></canvas>
<p>
<input type="button" onclick="draw2()" value="Draw!" />
</p>
</body>
Your solution is kinda correct but you're making it waaaay more complicated than it has to be.
All you have to do is this, nothing any fancier:
var tut = document.getElementById('tutorial');
ctx.drawImage(tut,0,0); // just put in the canvas you want to draw!
Here's a live jsfiddle example if you need more detail
Ok, I just found the answer to my question.
going off the function in Draw2(), I needed to set my img.src to the following:
img.src = document.getElementById('tutorial').toDataURL();
What this does is returns the base64 encoded data string of the png image of the canvas element.
I heard that drawing abilities will be supported by Web 2.0
Tried to find something in Internet about, nothing really clear. Could you please point me into something that allows (or will allow in future) to draw in HTML?
For example: I want to have ability draw few hexagons in different color on the page.
Thanks.
P.S. Sorry if question is a little bit "stupid", but I can't make it more smart.
A quick exemple of what you want to do:
<html>
<head>
<title>Hexagon canvas tutorial</title>
<script type="text/javascript">
function draw(){
//first let's get canvas HTML Element to draw something on it
var canvas = document.getElementById('tutorial');
//then let's see if the browser supports canvas element
if (canvas.getContext){
var ctx = canvas.getContext('2d');
//Pick Hexagon color, this one will be blue
ctx.fillStyle = "rgb(0, 0, 255)";
//let's start a path
ctx.beginPath();
//move cursor to position x=10 and y=60, and move it around to create an hexagon
ctx.moveTo(10,60);
ctx.lineTo(40,100);
ctx.lineTo(80,100);
ctx.lineTo(110,60);
ctx.lineTo(80,20);
ctx.lineTo(40,20);
//fill it and you got your first Hexagon
ctx.fill();
//This one will be green, but we will draw it like the first one
ctx.fillStyle = "rgb(0, 255, 0)";
ctx.beginPath();
ctx.moveTo(110,160);
ctx.lineTo(140,200);
ctx.lineTo(180,200);
ctx.lineTo(210,160);
ctx.lineTo(180,120);
ctx.lineTo(140,120);
ctx.fill();
}
}
</script>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body onload="draw();">
<canvas id="tutorial" width="300" height="300"></canvas>
</body>
</html>
What you're talking about is most likely the HTML5 Canvas element
I suspect you've been hearing about the Canvas Element. You can get started with it here: http://en.wikipedia.org/wiki/Canvas_element
Good luck!