This is a piece of HTML that demonstrates the problem:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>canvas fillText()</title>
</head>
<body>
<canvas id="canvas" width="400" height="200"></canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.font = "40px sans serif ";
context.lineWidth = 3;
context.strokeStyle = "blue";
context.strokeText("Hello World!", 40, 40);
context.fillStyle = "black";
context.fillText("Hello World!", 40, 80);
</script>
</body>
</html>
While other browsers show both the outlined and solid text, FF27 does not render the text using fillText().
Any suggestions? Thanks.
I am unable to comment due to reputation limitations, but I am running into the same issue :(. Unable to draw filled text in Firefox 27.0.1 on Windows 7 Pro SP1. I tried changing the fillStyle property to '#000', '#000000', 'black', 'rgb(0,0,0)', 'rgba(0,0,0,.8)'. I also attempted to use the deprecated functions 'mozDrawText' and 'mozPathText', both of which have been removed from the API. Please answer your post if you figure out a workaround. For now, I guess I will just call both strokeText and fillText with black, and hope nobody notices the hollow text in Firefox.
Just so you know, I reported this as a bug at:
https://bugzilla.mozilla.org/show_bug.cgi?id=982837
The issue has been resolved in FireFox 30.0, AFAICT.
Related
I want to use HTML canvas fillRect() to make a block with a diagonal line from upper right to bottom left.
I managed to create a block with a line from upper left to bottom right.
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="300" 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");
for(var i = 0; i < 300; ++i) {
ctx.fillRect(i, i, 1, 1);
}
</script>
</body>
</html>
How can I get what I want based on this code?
I managed it using lineTo.
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="300" 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.moveTo(300, 0);
ctx.lineTo(0, 300);
ctx.moveTo(0, 300);
ctx.lineTo(300, 0);
ctx.stroke();
</script>
</body>
</html>
Okay, so I've read numerous tutorials and a couple of threads here on stackoverflow, which has helped me to understand the canvas element a bit more, but am still having difficulties getting the crop to work. The code I am using is below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Canvas Image</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<!-- comments -->
<canvas id="canvas" width="640" height="600"></canvas>
<script>
var canvas = document.getElementById('canvas').getContext ('2d');
var canvasImage = new Image();
function drawCanvasImage(){
canvas.drawImage(canvasImage, 50, 25, 300, 350);
};
canvasImage.addEventListener('load',drawCanvasImage,false);
canvasImage.src = "Images/Batman.jpg";
</script>
<script>
var canvas = document.getElementById('canvas').getContext ('2d');
var canvasImage = new Image();
function cropImage(){
canvas.drawImage(canvasImage, 50, 25, 100, 100, 500, 100, 100, 100);
};
canvasImage.addEventListener('load',drawCanvasImage,false);
canvasImage.src = "Images/Batman.jpg";
</script>
</body>
</html>
My original image is an image that I've uploaded to my server, and it is displayed correctly, however my cropped image will not show at all. This is for a school project which is due tomorrow night, so any help would be appreciated. Thanks in advanced!
Figured it out! I misread my textbook, and in my original code I had:
function cropImage(){
canvas.drawImage(canvasImage, 50, 25, 100, 100, 500, 100, 100, 100);
};
After changing my code to:
function drawCanvasImage(){
canvas.drawImage(canvasImage, etc.)
the image displayed correctly. Now to just mess around with the coding to get it to what I need it to be.
As I am trying the easeljs javascript library, I've coded a short page in order to print a blue square. Unfortunately, I've tested it under Chromium in Ubuntu 12.04 host : but it does not show anything. Furthermore, the developper console of Chromium has not detected any error :
index.html
<!DOCTYPE html>
<html>
<head>
<title>Drag'n drop sur un carre</title>
<script src="easeljs-0.5.0.min.js"></script>
<script src="myScript.js"></script>
</head>
<body onload="init()">
<canvas id="mycanvas" width="640" height="480"></canvas>
</body>
</html>
myScript.js
function init(){
stage = new createjs.Stage(document.getElementById("mycanvas"));
carre = new createjs.Shape();
carre.graphics.beginFill(createjs.Graphics.getRGB(0, 0, 255));
carre.graphics.rect(0, 0, 30, 30);
carre.x = 70;
carre.y = 50;
stage.addChild(carre);
}
So : what's wrong ?
Thanks in advance.
(I'm using easeljs 0.5.0)
You need at the very end to have stage.update();
I am trying to create a wave animation in my canvas, but it works really slowly (Probably because of bad code).
How can I make this work smoother, and make the Wave(Math.sin) look more like a sea wave?
Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML 5 site</title>
<style>
#canvas{
margin:0 auto;
}
*{
overflow:hidden;
}
</style>
<script src="jquery-1.6.4.min.js"></script>
</head>
<body>
<div id="warp">
<canvas id="canvas" style="border:1px solid black;" />
Your Browser does not support HTML5;
</canvas>
</div>
<script>
$(document).ready(function(){
resizeCanvas();
function resizeCanvas() {
$("#canvas")
.attr('width', $(window).width())
.attr('height', $(window).height());
}
$(window).resize(resizeCanvas());
x=0;y=0;
var ctx = $("#canvas").get(0).getContext('2d');
$('#canvas').mousemove(function(e){
resizeCanvas();
for(var i=0;i<=$(window).width();i++){
y =Math.sin((i+x)*50)*12;
ctx.fillStyle = "blue";
ctx.arc(i, y+100, 4, 0, 2*Math.PI);
ctx.fill();
}
x+=20;
});
});
</script>
</body>
</html>
I changed the code quite a bit, removed the dependency for jQuery. The main thing however that I did to speed up your code was move the fill to be called only once after the draw operations, and start/end the drawing of the path. Also I was confused by the recalling of resizeCanvas() I would just tie that to the window.onresize event and just set the canvas to the innerwidth/innerheight of the window.
Live Demo
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
x=0,y=0;
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.onmousemove= function(e){
//clear the canvas
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.fillStyle = "blue";
var width = window.innerWidth;
// start the path
ctx.beginPath();
//draw it
for(var i=0;i<=width;i++){
y=Math.sin((i+x)*50)*12;
ctx.arc(i, y+100, 4, 0, 2*Math.PI);
}
//close it
ctx.closePath();
//fill it
ctx.fill();
x+=20;
}
I'm trying to stylize some text for my company's homepage. The text looks great in IE8 but does not look so good in Firefox or Chrome.
In firefox it looks like there is a few extra white pixels to the right of each character.
In chrome the effect is similar, but does not happen for all letters.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="js/raphael-min.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function () {
var paper = Raphael(10, 0, 600, 400);
var lbl = paper.text(135, 40, "AaEeIiOoUuYy").attr( {
"font" : '36px Franklin Gothic Medium, Helvetica, Arial',
stroke : "#000",
fill : '#ffffff',
'font-weight' : 'bold',
'text-anchor' : 'start',
'stroke-opacity' : .9
});
var lbl = paper.text(0, 90, "AaEeIiOoUuYy").attr( {
"font" : '62px Franklin Gothic Medium, Helvetica, Arial',
stroke : "#000",
fill : '#ffffff',
'font-weight' : 'bold',
'text-anchor' : 'start',
'stroke-opacity' : .9
});
}
</script>
<style type="text/css">
#page
{
background: #000;
width:100%;
height: 600px;
}
</style>
</head>
<body>
<div id="page">
</div>
</body>
</html>
Here are images showing the issue :
Firefox
IE8
Chrome
I'm using Raphael 1.5.2. Thanks!
EDIT:
I'm also open to any other cross-browser solution that allows me to display a specific font with a thin black outline (stroke).
If you set the stroke colour to the same as the fill, it'll hide the slight rendering fault.
You should be aware that IE uses it's own vector rendering engine called VML rather than SVG. Raphael does a great job of hiding most of the differences for you but not all. The VML renderer has a number of bugs, that worst of which for your use is that IE7 will ignore the specified font family and always use Arial.
I ended up ditching raphael and using font-shadow for firefox/chrome, and a slight Glow filter for IE. This fixes my problem for all major browsers.