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();
}
Related
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.
The Code Is Like Below:
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(100, 150);
context.lineTo(450, 50);
context.lineWidth = 10;
context.strokeStyle = '#ff0000';
context.stroke();
context.beginPath();
context.moveTo(100, 150);
context.lineTo(450, 50);
context.lineWidth = 10;
context.strokeStyle = '#ffffff';
context.stroke();
And Here is the result:
I don't want the dash Line,
How To cover the red Line totally?
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.
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();
}
Let say I have x, y, width and height. I need to draw a inclined/tilted Rectangle at particular angle. I cannot use context.rotate. Because it is changing other shapes of canvas.
You can use context.rotate, you just have to undo the rotation before you draw the other shapes. Like this:
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.rect(88, 50, 200, 100);
context.fillStyle = "#8ED6FF";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
context.rotate(0.5);
context.beginPath();
context.rect(138, 120, 200, 100);
context.fillStyle = "#FE8E9D";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
context.rotate(-0.5);
context.beginPath();
context.rect(188, 190, 200, 100);
context.fillStyle = "#FEEF8E";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();