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>
Related
Trying to create simple svg canvas using D3 but looking at elements in the console nothing shows up. D3 seems to be loading because from the console when I type d3. I get the options and methods available in D3. But the svg canvas is not being drawn. What am I missing?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Bar Chart</title>
<style>
</style>
</head>
<body>
<div id="chart"></div>
<script src="d3.v3.js">
var w = 500;
var h = 500;
function drawSVG(s) {
var svg = d3.select("#chart")
.append("svg")
.attr("width",w)
.attr("height",h);
console.log(s);
}
var sampleStr = "hello";
drawSVG(sampleStr);
</script>
</body>
</html>
You've placed your code within the script tag that has its source attribute set to download D3:
<script src="d3.v3.js">
... your code is here
</script>
You need to place your code in its own script tag:
<script src="d3.v3.js"></script>
<script>
... your code should go here
</script>
Apparently this doesn't work, and since I'm new to HTML5 I'm unsure as to why. I should get some vertical lines on the canvas. The idea is to build a grid on the canvas screen to work from, but this doesn't seem to be creating the lines for some reason.
<!DOCTYPE html>
<html>
<head>
<title>Test App</title>
<style>
body {
padding:0px;
margin:0px;
}
canvas {
border:1px solid #000000;
}
</style>
</head>
<body>
<canvas id="gc" width="800" height="600"></canvas>
<script>
function buildGrid() {
alert("Start!");
var gameCanvas = document.getElementById("gc");
var ctx = gameCanvas.getContext("2d");
for (x=5; x<gameCanvas.width; x+=5) {
console.log(x);
ctx.moveTo(x, 10);
ctx.lineTo(x, gameCanvas.length);
}
ctx.strokeStyle = "black";
ctx.stroke();
}
window.onload = buildGrid();
</script>
</body>
</html>
Instead of
ctx.lineTo(x, gameCanvas.length);
Try
ctx.lineTo(x, gameCanvas.height);
https://jsfiddle.net/9as7mwb6/6/
There’s no gameCanvas.length. It should be gameCanvas.height.
However, I think you should add 0.5 to each x value in order to make the edges sharp instead of blurry:
for (var x = 5; x < gameCanvas.width; x += 5) {
console.log(x);
ctx.moveTo(x + 0.5, 10);
ctx.lineTo(x + 0.5, gameCanvas.height);
}
Has anyone here have done clipping an image within an image? I've seen so far about clipping on the canvas but are all regular shapes(rectangle, circle, etc...). It would be nice if some have actually done it.
P.S. with fabric.js or just the regular canvas.
Sure, you can use compositing to draw a second image only where the first image exists:
ctx.drawImage(image1,0,0); // this creates the 'mask'
ctx.globalCompositeOperation='source-in';
ctx.drawImage(image2,0,0); // this image only draws inside the mask
Illustration: House image drawn first and second Grass image is drawn only where house pixels exist:
Example code an a Demo: http://jsfiddle.net/m1erickson/r71d8d8b/
<!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-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
// put the paths to your images in imageURLs[]
var imageURLs=[];
// push all your image urls!
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house100x100.png");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/mower_start.png");
// the loaded images will be placed in images[]
var imgs=[];
var imagesOK=0;
loadAllImages(start);
function loadAllImages(callback){
for (var i=0; i<imageURLs.length; i++) {
var img = new Image();
imgs.push(img);
img.onload = function(){
imagesOK++;
if (imagesOK>=imageURLs.length ) {
callback();
}
};
img.onerror=function(){alert("image load failed");}
img.crossOrigin="anonymous";
img.src = imageURLs[i];
}
}
function start(){
// the imgs[] array now holds fully loaded images
// the imgs[] are in the same order as imageURLs[]
ctx.drawImage(imgs[0],50,50);
ctx.globalCompositeOperation='source-in';
ctx.drawImage(imgs[1],0,0);
}
}); // end $(function(){});
</script>
</head>
<body>
<h4>Second grass image is drawn only where<br>house pixels already existed<br>(Uses 'source-in' compositing)</h4>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
http://jsfiddle.net/KFEAC/2/
I'd like to learn how to add a image from my hard drive into an HTML5 canvas. I don't wanna upload it, just load it from my hard drive dynamically from a browse window after a button is clicked.
I do believe this is possible without PHP.
Can anyone help?
HTML:
<input type="file" id="openimg"> <input type="button" id="load" value="Load" style="width:100px;"><br/>
Width and Height (px): <input type="text" id="width" style="width:100px;">, <input type="text" id="height" style="width:100px;"><br/>
<canvas id="myimg" width="300" height="300"></canvas>
JavaScript/JQuery:
$(function(){
$("canvas#myimg").draggable();
var canvas = document.getElementById("myimg");
var context = canvas.getContext("2d");
function draw() {
var chosenimg = $("#openimg").val();
var w = parseInt($("#width").val());
var h = parseInt($("#height").val());
canvas.width = w;
canvas.height = h;
var img = new Image();
img.onload = function () {
context.drawImage(img,0,0,img.width,img.height,0,0,w,h);
}
img.src = $("#openimg").val();}
$("#width").val(150);
$("#height").val(150);
$("#load").click(function(){ draw(); });
});
<!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-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas = document.getElementById("myimg");
var context = canvas.getContext("2d");
function draw() {
var chosenimg = $("#openimg").val();
var w = parseInt($("#width").val());
var h = parseInt($("#height").val());
canvas.width = w;
canvas.height = h;
var img = new Image();
img.onload = function () {
context.drawImage(img,0,0,img.width,img.height,0,0,w,h);
console.log(img.src);
}
img.src = $("#openimg").val();
}
$("#width").val(150);
$("#height").val(150);
$("#load").click(function(){ draw(); });
}); // end $(function(){});
</script>
</head>
<body>
<input type="file" id="openimg">
<input type="button" id="load" value="Load" style="width:100px;"><br/>
Width and Height (px):
<input type="text" id="width" style="width:100px;">,
<input type="text" id="height" style="width:100px;"><br/>
<canvas id="myimg" width="300" height="300"></canvas>
</body>
</html>
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;
}