I've looked over this code every way I can, and I'm not seeing what's tripping me up. This is my first night looking into canvas, and my first night messing with JS outside of Codecademy, so I'm sure it's something fundamental that I missed at some point.
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(75, 50);
ctx.lineTo(100, 75);
ctx.lineTo(100, 25);
ctx.fill();
}
}
Here's the fiddle
You forgot to call draw function. Take a look here.
draw();
code looks like this
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(75,50);
ctx.lineTo(100,75);
ctx.lineTo(100,25);
ctx.fill();
}
}
draw();
Related
I'm trying to make a circle around another circle except that each turn the circles are not recreated in the same place so it doesn't work.
function init(){
ctx.globaleCompositeOperation = 'destination-over';
ctx.clearRect(0,0,innerWidth,innerHeight);
ctx.translate(800,400);
[enter image description here][1]
ctx.beginPath();
ctx.strokeStyle = "black";
ctx.arc(0,0,110,0,Math.PI*2);
ctx.stroke();
ctx.closePath();
ctx.rotate(0.1*Math.PI/180);
ctx.beginPath();
ctx.arc(100,100,10,0,Math.PI*2);
ctx.fillStyle = "blue";
ctx.fill();
ctx.closePath();
requestAnimationFrame(init);
}
init();
this is what it gives:
when i want that :
It works for me if I do two things.
Mend the typo which has an extra e in globaleCompositeOperation
And I sort of guess at what you have set innerWidth and innerHeight to. Are these set somewhere?
If you could put up a snippet with everything in it to make it work that might help. I can’t make a snippet as I am on a touch only device I’m afraid.
Here’s my code
<canvas id='c'></canvas>
<script>
function init(){
ctx.globalCompositeOperation = 'destination-over';
ctx.clearRect(0,0,1024,768);
ctx.translate(0,0);
ctx.beginPath();
ctx.strokeStyle = "black";
ctx.arc(0,0,110,0,Math.PI*2);
ctx.stroke();
ctx.closePath();
ctx.rotate(0.1*Math.PI/180);
ctx.beginPath();
ctx.arc(100,100,10,0,Math.PI*2);
ctx.fillStyle = "blue";
ctx.fill();
ctx.closePath();
requestAnimationFrame(init);
}
let c= document.getElementById('c');
let ctx = c.getContext('2d');
init();
</script>
I am such a noob and I have no idea why nothing is appearing on my canvas. Can someone help me out? I wanted to have a black box on my canvas, that was the intention anyway.
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 1040;
canvas.height = 400;
canvas.style.display='block';
canvas.style.marginLeft="auto";
canvas.style.marginRight="auto";
var mainFunction= function(){
ctx.fillStyle = "rgb(0, 0, 0)";
ctx.beginPath();
ctx.rect(0, 0, canvas.width, canvas.height);
ctx.closePath();
ctx.fill();
requestAnimationFrame(mainFunction);
};
mainFunction();
You have created a <canvas> element but have not attached it anywhere in the DOM. Perhaps you want something like
document.body.appendChild(canvas);
or another suitable container.
Basically, you do not have an attached canvas to the DOM.
Create a html file with <canvas id="root"></canvas>;
var canvas = document.getElementById("root");
i used a udemy course to make a simple pong game.
I am now recreating it again as practice and i keep getting the error canvas is null. Any Help?
<html>
<canvas id="gamecanvas" width="600" height="800"></canvas>
<script>
var canvas = null;
var Context = null;
window.onload = function(){
canvas.document.getElementById("gamecanvas");
Context.canvas.getContext("2d");
drawEverything();
}
function drawEverything() {
Context.fillStyle = "black";
Context.fillRect(0,0,canvas.width,canvas.height);
Context.fillStyle = "white";
Context.fillRect(0,360,20,80);
Context.fillStyle = "white";
Context.fillRect(580,360,20,80);
Context.fillStyle = "green";
context.beginpath();
context.arc(0,0,10,10,Math.PI*2,true);
context.fill();
}
That is because you set it to null! Change
canvas.document.getElementById("gamecanvas");
To
canvas = document.getElementById("gamecanvas");
Otherwise, you never set canvas.
You should do like this.
canvas = document.getElementById("gamecanvas");
Context = canvas.getContext("2d");
You set canvas to null so of course it will be null. This should help.
canvas = document.getElementById("gamecanvas")
context = canvas.getContext("2d");
I've recently started learning web techniques, so I'm still a newbie regarding pretty much everything. I've stumbled upon this portfolio site, link, which I'm trying to "recreate" as part of my learning process/practice.
Here I'm interested in the background of the page, and how to make that transparent letter on canvas. In my current work, I have a html background image set, fillRect() on a full screen with opacity of 0.9 , and now I don't know how to make use of clearRect().
The question is: Am I on the right track, and is there any way that I'm not aware of, in which I can use clearRect() to clear pixels on canvas in a letter shape? Like, without manually defining a path for clearRect(), but where I would only input a letter and clear pixels in its shape. Sorry if I posted my current code below the wrong way, it's my first time posting here.
var canvas = document.getElementById('layout');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
}
$(document).ready(function() {
window.addEventListener('resize', setCanvasSize); //false
window.addEventListener('resize', draw); //false
//set canvas size----------------------------------------
setCanvasSize();
function setCanvasSize() {
canvas.width = $(window).width();
canvas.height = $(window).height();
}
//draw---------------------------------------------------
draw();
function draw() {
var x = canvas.width;
var y = canvas.height;
ctx.fillStyle = "white";
ctx.fillRect(0, 0, x, y);
ctx.clearRect(50, 30, 110, 35);
}
});
You can achieve effects such as this using globalCompositeOperation.
Here's an example where some text is used as shape to erase drawn pixels:
var canvas = document.createElement("canvas");
canvas.width = 300;
canvas.height = 200;
var ctx = canvas.getContext("2d");
document.body.appendChild(canvas);
ctx.fillStyle = "rgba(255, 255, 255, 0.8";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.globalCompositeOperation = "destination-out";
ctx.font = "70pt Arial";
ctx.fillText("Text", 50, 130);
Here's the JSFiddle: http://jsfiddle.net/eSpUv/
I have to draw a stroked fill on canvas. For this I call ctx.fill and ctx.stroke separately. Due to this, the shadow of the stroke draws on top of the fill which I want to avoid.
Could somebody please tell if there is a way to avoid this?
Here is my code:
ctx1.fillStyle = "blue";
ctx1.strokeStyle = "black";
ctx1.shadowColor = "rgba(0,255,0, 1)";
ctx1.shadowOffsetX = 50;
ctx1.shadowOffsetY = 50;
ctx1.lineWidth = "20";
ctx.beginPath();
ctx.moveTo(300, 100);
ctx.lineTo(400, 100);
ctx.lineTo(400, 200);
ctx.lineTo(300, 200);
ctx.closePath();
ctx1.fill();
ctx1.stroke();
http://jsfiddle.net/abWYZ/3/
Every time you perform a draw action on the context the shadow is also drawn. The way canvas works is every thing that's drawn is placed on top of what was previously there. So whats happening is the fill is performed, making a shadow of it, and then the stroke is drawn, which makes a shadow on top of all previous drawn objects.
Here is one possible solution.
Live Demo
// Grab the Canvas and Drawing Context
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
ctx.save();
ctx.fillStyle = "blue";
ctx.strokeStyle = "black";
ctx.lineWidth="20";
ctx.beginPath();
ctx.moveTo(300, 100);
ctx.lineTo(400, 100);
ctx.lineTo(400, 200);
ctx.lineTo(300, 200);
ctx.closePath();
ctx.shadowColor = "rgba(0,255,0, 1)";
ctx.shadowOffsetX = 50;
ctx.shadowOffsetY = 50;
ctx.stroke();
ctx.fill();
// clear the shadow
ctx.shadowColor = 0;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
// restroke w/o the shadow
ctx.stroke();
If you use an approach like this I suggest making a function called toggleShadow or something along those lines allowing you to control when the shadows are drawn.