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.
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>
I am having alot of trouble getting c3 to work in my web page. My code for the graphing is right, it just wont load anything and I am guessing this is due to me not having the right script src. Does anyone have a starter file for using c3, or the code I would need to load it in. Or is there a CDN I could reference?
Here is a quick starter file
<!DOCTYPE html>
<html lang="en">
<head>
<title>C3</title>
<meta charset="utf-8" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
</head>
<body>
<div id="chart"></div>
<script>
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
]
}
});
</script>
</body>
</html>
But I would recommend, getting stable versions from the respective sites or GitHub projects.
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.
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;
}