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 !.
Related
I need help drawing see through text for my weather app.
I need the temperature displayed in opacity for a nice look,
How can I do this in Canvas?
Please Help!
Thanks in advance!
You will have to play around with it but something like:
<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");
// code to draw picture as normal
ctx.globalAlpha = 0.5;
// code to draw text
</script>
</body>
</html>
I am trying to understand how to use the crossorigin attribute for the img tag. I couldn't find a good example (The ones I found about CORS enabled images are explained with JavaScript codes, therefore I couldn't see the crossorigin attribute with the img tag.
I have got a guess, please correct my mistakes if I understood something wrong.
First of all one can write the code piece below to draw an image to canvas:
<canvas id="canvas" width=400 height=400></canvas>
<br><br>
<img id="image" src="http://...." alt="" width="400" height="400">
<script>
function draw() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var img = new Image();
img.crossOrigin = "Anonymous";
img.src = document.getElementById("image").value;
context.drawImage(img, 40, 40);
}
</script>
Is the code below equivalent to the upper one? It doesn't include "img.crossOrigin" but have crossorigin attribute in the img tag.
<canvas id="canvas" width=400 height=400></canvas>
<br><br>
<img id="image" crossorigin="anonymous"src="http://...." alt="" width="400" height="400">
<script>
function draw() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var img = new Image();
img.src = document.getElementById("image").value;
context.drawImage(img, 40, 40);
}
</script>
To tell the truth I cannot make experiments because I don't know what site allows to use its images as CORS.
What I guess is that, if a site allow to use its images in canvas if the CORS request is done by anonymously you can draw it in canvas, if not you cannot draw it in canvas even if the request is done by anonymously (I am not sure if I am right here). Therefore both of the examples above must be requesting CORS anonymously.
Could you please say if both of them works the same? If not, could you please explain why and give me an example using the crossorigin attribute with the img tag?
Since you are using the #image element as the source for your image, the 2 versions of your code are roughly equivalent.
But...
The version without crossorigin="anonymous" in the img element will probably still generate a cross-domain violation.
That's because the image is originally loaded into the img element without the cross-origin flag set to anonymous.
The javascript code will likely use the cached version of the image from the img element rather than trying to reload it from http://...
This means the cached image data will still taint the canvas as containing cross-origin content.
BTW, a syntax error in your code:
// Not: img.src = document.getElementById("image").value;
img.src = document.getElementById("image").src;
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/
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!