The teacher has asked us to create a Canvas with some quick interactive features (The Class is interactive 101. Go figure) So I decided to create a quick idea using my favourite sports team, the Montreal Canadians. I will separate the HTML from the JavaScript.
HTML(Named: MontrealSymbol.html):
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>Say Hello To...</h1>
<h2>The MONTREAL CANADIENS!</h2>
<canvas id="mCanvas" width="320" height="240">
<p>Sorry, The Canvas element is not supported in this browser :(</p>
</canvas>
<!-- Don't load/run Javascript until Canvas has loaded -->
<script src="MontrealSymbol.js">
</script>
<br/>
<button type="button" onclick="mSymbol()">Draw the Symbol of the Greats!</button>
<button type="button" onclick="clearBoard()">Clear The Board</button>
</body>
</html>
JavaScript(Named: MontrealSymbol.js):
//test to see if we're connected.
console.log("Javascript Initialized");
//1. set up the canvas as an object with 2D context
var canvas = document.getElementById("mCanvas");
var context = canvas.getContext("2d");
//2. setting up font for later use
context.font = '24pt Verdana';
//Red Background
context.fillStyle = "#eb1919";
context.fillRect(0, 0, 320, 240);
//---------------X, Y---W, H
//White bar
context.fillStyle = "white";
context.fillRect(0, 75, 320, 85);
//Blue Bar
context.fillStyle = "blue";
context.fillRect(0, 80, 320, 75);
//border
context.fillStyle = "black";
context.fillRect(0, 0, 320, 5);
context.fillStyle = "black";
context.fillRect(0, 0, 3, 240);
context.fillStyle = "black";
context.fillRect(0, 235, 320, 5);
context.fillStyle = "black";
context.fillRect(317, 0, 3, 240);
function mSymbol(){
console.log("Drawing Montreal Canadiens Symbol");
base_image = new Image();
base_image.src = 'images/mCanadiens3.jpg';
base_image.onload = function(){
context.drawImage(base_image, 75, 62);}
}
function clearBoard(){
console.log("Clearing the Board");
context.clearRect(0, 0, 640, 480);
drawBack();
}
function drawBack(){
//Background
context.fillStyle = "#eb1919";
context.fillRect(0, 0, 320, 240);
//---------------X, Y---W, H
//layer one
context.fillStyle = "white";
context.fillRect(0, 75, 320, 85);
//layer two
context.fillStyle = "blue";
context.fillRect(0, 80, 320, 75);
//border
context.fillStyle = "black";
context.fillRect(0, 0, 320, 5);
context.fillStyle = "black";
context.fillRect(0, 0, 3, 240);
context.fillStyle = "black";
context.fillRect(0, 235, 320, 5);
context.fillStyle = "black";
context.fillRect(317, 0, 3, 240);
}
context.beginPath();
context.arc(20, 20, 10, 0, 2 * Math.PI, false);
context.fillStyle = 'black';
context.fill();
context.lineWidth = 2;
context.strokeStyle = '111';
context.stroke();
This runs fine. And I apologize that I don't have the code I've been attempting to use to do the mouse event. I've used a couple different people's ideas, but nothing seems to work. I just keep getting errors. I probably forgot something. But If someone could come up with a quick solution, What I want is a Mouse Click event that draws the last 7 lines of the JavaScript on click, and won't repeat when holding the mouse down.
HTML:
<canvas id="mCanvas" width="320" height="240" onclick="canvasClick()">
<p>Sorry, The Canvas element is not supported in this browser :(</p>
</canvas>
JavaScript:
var canvas = document.getElementById("mCanvas");
var context = canvas.getContext("2d");
function canvasClick(){
context.beginPath();
context.arc(20, 20, 10, 0, 2 * Math.PI, false);
context.fillStyle = 'black';
context.fill();
context.lineWidth = 2;
context.strokeStyle = '111';
context.stroke();
}
Related
I've encountered this issue right now with Firefox 70.0.1 64bit on 2 customer's machines:
Windows 10, version 1809 build 17763.805, graphics card is NVIDIA GeForce GTX 1060 6GB
Windows 10, version 1903 build 18362.356, graphics Intel UHD Graphics 620
On customer's machines both circles has same bright green color:
Here is broken version
On all my machines (linux, ff 70 64bit) and in Chromium/Chrome I see left circle dark green, right circle very faint green (opacity 0.1). It also works fine on every single virtual.
Here is working version
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.fillStyle = '#777777';
context.fillRect(100, 100, 100, 10);
context.globalCompositeOperation = "lighter";
context.globalAlpha = 0.30000001192092896;
var grd = context.createRadialGradient(150, 100, 99, 150, 100, 100);
grd.addColorStop(0, "green");
grd.addColorStop(1, "transparent");
context.fillStyle = grd;
context.lineWidth = 0;
context.strokeStyle = '';
context.beginPath();
context.arc(150, 100, 50, 0, 6.283185307179586);
context.fill();
context.globalAlpha = 1;
context.globalCompositeOperation = "source-over";
context.fillStyle = '#777777';
context.fillRect(250, 100, 100, 10);
context.globalCompositeOperation = "lighter";
context.globalAlpha = 0.10000001192092896;
var grd = context.createRadialGradient(300, 100, 95, 300, 100, 150);
grd.addColorStop(0, "green");
grd.addColorStop(1, "transparent");
context.fillStyle = grd;
context.lineWidth = 0;
context.strokeStyle = '';
context.beginPath();
context.arc(300, 100, 50, 0, 6.283185307179586);
context.fill();
context.globalAlpha = 1;
context.globalCompositeOperation = "source-over";
<canvas id="canvas" width=500 height=500 style="background-color: black;"></canvas>
I created a Canvas with Javascript. I created a car with Javascript objects with like rectangles, circles etc. My question is how can I let a object move so it looks like the car is riding.
I already tried some things with what I found on Google but I can't figure it out.
I’m still learning new things in Javascript, thank you in advance for the help!
var canvasEl = document.createElement('canvas');
canvasEl.setAttribute('width', 1535);
canvasEl.setAttribute('height', 720);
var context = canvasEl.getContext('2d');
function circle(x, y){
context.arc(x,y,30,0,2*Math.PI);
}
function circleCloud(x, y) {
context.arc(x,y,30,0,2*Math.PI);
context.fillStyle = "white";
context.fill();
}
function sunBeam(x, y, s, e) {
context.moveTo(x,y);
context.lineTo(s,e);
context.strokeStyle = 'rgba(252, 212, 64)';
context.lineWidth = 4;
context.stroke();
}
var body = document.querySelector('body');
body.appendChild(canvasEl);
var x = 0;
context.beginPath();
context.fillStyle = 'rgba(50, 150, 200, .7)';
context.fillRect(x,0,1535,250);
context.closePath();
context.beginPath();
context.fillStyle = "green";
context.fillRect(0,250,1535,250);
context.closePath();
context.beginPath();
context.fillStyle = "green";
context.fillRect(0,600,1535,130);
context.closePath();
context.beginPath();
context.fillStyle = "Lightblue";
context.fillRect(900,480,130,50);
context.lineWidth = 3;
context.strokeRect(900,480,130,50);
context.strokeStyle = "black";
context.stroke();
context.closePath();
context.beginPath();
context.fillStyle = "Blue";
context.fillRect(1030,440,70,90);
context.lineWidth = 3;
context.strokeRect(1030,440,70,90);
context.strokeStyle = "black";
context.stroke();
context.closePath();
context.beginPath();
context.fillStyle = "White";
context.fillRect(1070,460,30,20);
context.lineWidth = 3;
context.strokeRect(1070,460,30,20);
context.strokeStyle = "black";
context.stroke();
context.closePath();
context.beginPath();
context.arc(925,540,20,0,2*Math.PI);
context.fillStyle = "Gold";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
context.closePath();
context.beginPath();
context.arc(1040,540,20,0,2*Math.PI);
context.fillStyle = "Gold";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "Black";
context.stroke();
context.closePath();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<script src="js/main.js"></script>
</body>
</html>
You need to start by using variables on the position of the truck ...
I see you started with: var x = 0; but not really used much on the truck
Then we move using a setInterval, inside the loop we do a few things:
increase the x position
clear the entire canvas
draw the object or objects
var canvasEl = document.createElement('canvas');
canvasEl.setAttribute('width', 800);
canvasEl.setAttribute('height', 160);
var context = canvasEl.getContext('2d');
var body = document.querySelector('body');
body.appendChild(canvasEl);
var x = 0;
var y = 60;
drawTruck();
setInterval(function() {
x++;
context.clearRect(0, 0, 800, 160);
drawTruck();
}, 80);
function drawTruck() {
context.beginPath();
context.fillStyle = "Lightblue";
context.fillRect(x, y, 130, 50);
context.lineWidth = 3;
context.strokeRect(x, y, 130, 50);
context.strokeStyle = "black";
context.stroke();
context.closePath();
context.beginPath();
context.fillStyle = "Blue";
context.fillRect(x + 130, y - 40, 70, 90);
context.lineWidth = 3;
context.strokeRect(x + 130, y - 40, 70, 90);
context.stroke();
context.closePath();
context.beginPath();
context.fillStyle = "White";
context.fillRect(x + 170, y - 20, 30, 20);
context.lineWidth = 3;
context.strokeRect(x + 170, y - 20, 30, 20);
context.stroke();
context.closePath();
context.beginPath();
context.arc(x + 25, y + 60, 20, 0, 2 * Math.PI);
context.fillStyle = "Gold";
context.fill();
context.lineWidth = 5;
context.stroke();
context.closePath();
context.beginPath();
context.arc(x + 140, y + 60, 20, 0, 2 * Math.PI);
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.arc(x + 140 + Math.cos(x) * 8, y + 60 + Math.sin(x) * 8, 6, 0, 2 * Math.PI);
context.stroke();
context.closePath();
}
I added a small animation to the front wheel to simulate rotation while the truck moves forward, just some basic math to make a circle spin inside the wheel
Here are 3 links which can you can follow to learn JavaScript HTML DOM Animation
Game Controller and Move object with arrow key. You should try to learn those things. Then you can do it.
I want to create the logo above using the html5 canvas but at the end of the day, it displayed only a triangle.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Coa</title>
</head>
<body>
<canvas id="logo" width="900" height="80">
<h1>COA</h1>
</canvas>
<script>
//function that draw the logo. I create a JavaScript function for drawing the
var drawLogo = function(){
var canvas = document.getElementById('logo');
var context = canvas.getContext("2d");
//applying gradient
var gradient = context.createLinearGradient(0, 0, 0, 40);
gradient.addColorStop(0, "#aa0000");
gradient.addColorStop(1, "#ff0000");
// use the strokepath,beginPath() and closePath() methods to start drawing a line, stroke and close when finish
context.fillStyle = gradient;
context.strokeStyle = gradient;
context.lineWidth = 2;
context.beginPath();
context.moveTo(0, 40);
context.lineTo(30, 0);
context.lineTo(60, 40);
context.lineTo(285, 40);
context.fill();
context.closePath();
//adding text
context.font = "italic 40px 'Arial'";
context.fillText("Coa", 60,36);
//Moving the Origin so as to fit the square under the triangle
context.save();
context.translate(20, 20);
context.fillRect(0, 0, 20, 20);
//use a path to draw the inner triangle
context.fillStyle("#ffffff");
context.strokeStyle("#ffffff");
context.lineWidth = 2;
context.beginPath();
context.moveTo();
context.lineTo(0, 20);
context.lineTo(10, 0);
context.lineTo(20, 20);
context.lineTo(0, 20);
context.fill();
context.closePath();
context.restore();
};
//Then invoke this method after first checking for the existence of the <canvas> element
var canvas = document.getElementById("logo");
if(canvas.getContext){
drawLogo();
}
</script>
</body>
</html>
I don't know what am doing wrong that makes the the code not working properly.
I have searched the internet and couldn't find anything tangible that solve the problem. Any help will be appreciated.
UPDATE: Try this:
if (document.getElementById('logo')) {
var canvas = document.getElementById("logo");
var context = canvas.getContext("2d");
//applying gradient
var gradient = context.createLinearGradient(0, 0, 0, 40);
gradient.addColorStop(0, "#aa0000");
gradient.addColorStop(1, "#ff0000");
context.strokeStyle = gradient;
context.fillStyle = gradient;
context.lineWidth = 2;
context.beginPath();
context.moveTo(0, 40);
context.lineTo(30, 0);
context.lineTo(60, 40);
context.lineTo(285, 40);
context.stroke();
context.fillRect(20, 20, 20, 20);
context.beginPath();
context.moveTo(30, 20);
context.lineTo(37, 28);
context.lineTo(35, 40);
context.lineTo(25, 40);
context.lineTo(23, 28);
context.lineTo(30, 20);
context.fillStyle="#ffffff";
context.fill();
context.fillStyle="#000000";
context.font = "italic 40px Arial";
context.fillText("coa", 60,36);
}
I moved around some of your code and it works now for me on Firefox. It looks like you haven't put the pentagon in the canvas yet. Here is a JSFillde:
https://jsfiddle.net/o289buyk/
if (document.getElementById('logo')) {
var canvas = document.getElementById("logo");
var context = canvas.getContext("2d");
//applying gradient
var gradient = context.createLinearGradient(0, 0, 0, 40);
gradient.addColorStop(0, "#aa0000");
gradient.addColorStop(1, "#ff0000");
// use the strokepath,beginPath() and closePath() methods to start drawing a line, stroke and close when finish
context.fillStyle = gradient;
context.strokeStyle = gradient;
context.lineWidth = 2;
context.beginPath();
context.moveTo(0, 40);
context.lineTo(30, 0);
context.lineTo(60, 40);
context.lineTo(285, 40);
context.fill();
context.closePath();
//adding text
context.font = "italic 40px 'Arial'";
context.fillText("Coa", 60,36);
//Moving the Origin so as to fit the square under the triangle
context.save();
context.translate(20, 20);
context.fillRect(0, 0, 20, 20);
//use a path to draw the inner triangle
context.fillStyle("#ffffff");
context.strokeStyle("#ffffff");
context.lineWidth = 2;
context.beginPath();
context.moveTo();
context.lineTo(0, 20);
context.lineTo(10, 0);
context.lineTo(20, 20);
context.lineTo(0, 20);
context.fill();
context.closePath();
context.restore();
}
First, I draw a circle using arc and fill it. (button 1)
Then, I draw a rect over it and another arc and fill it red. (button 2)
However, after the second function, the first arc stays there and turns red, all of a sudden. Help?
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
function function1() {
context.fillStyle = "black";
context.fillRect(0, 0, 400, 400);
context.fillStyle = "white";
context.arc(100, 200, 50, 0, 2*Math.PI);
context.fill();
}
function function2() {
context.fillStyle = "black";
context.fillRect(0, 0, 400, 400);
context.fillStyle = "red";
context.arc(300, 200, 50, 0, 2*Math.PI);
context.fill();
}
<canvas id="canvas" width="400" height="400" style="border: 1px solid black"></canvas>
<button onClick="function1()">Button 1</button>
<button onClick="function2()">Button 2</button>
OH. WOW. I just had the same exact error as a question I posted literally like over a year ago, where I forgot to put context.beginPath();. Stupid me.
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
function function1() {
context.fillStyle = "black";
context.fillRect(0, 0, 400, 400);
context.fillStyle = "white";
context.beginPath();
context.arc(100, 200, 50, 0, 2*Math.PI);
context.fill();
}
function function2() {
context.fillStyle = "black";
context.fillRect(0, 0, 400, 400);
context.fillStyle = "red";
context.beginPath();
context.arc(300, 200, 50, 0, 2*Math.PI);
context.fill();
}
<canvas id="canvas" width="400" height="400" style="border: 1px solid black"></canvas>
<button onClick="function1()">Button 1</button>
<button onClick="function2()">Button 2</button>
I want to add an image on the canvas and then zoom/Scale it
I am trying to add this image file but unable to do so though I can add square and then zoom the canvas.
https://dl.dropboxusercontent.com/u/139992952/houseIcon.png
how can I add the image.
Fiddle:
http://jsfiddle.net/ndYdk/11/
function draw(scale, translatePos){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
// clear canvas
context.clearRect(0, 0, canvas.width, canvas.height);
context.save();
context.translate(translatePos.x, translatePos.y);
context.scale(scale, scale);
context.beginPath(); // begin custom shape
context.rect(20, 20, 50, 50);
context.fillStyle = 'red';
context.fill();
context.lineWidth = 2;
context.strokeStyle = 'black';
context.stroke();
context.closePath(); // complete custom shape
var grd = context.createLinearGradient(-59, -100, 81, 100);
context.fillStyle = grd;
context.fill();
context.stroke();
context.restore();
}
Any help will be really appreciated.