HTML:
<html>
<head>
<link rel="stylesheet" href="index.css">
<title>sdssd</title>
<meta charset="UTF-8">
</head>
<body>
<canvas id="area">
</canvas>
</body>
<footer>
<script type="text/javascript" src="index.js"></script>
</footer>
</html>
CSS:
#area {
width: 600px;
height: 600px;
margin: auto 30%;
background-color: lightgray;
outline: 1px solid black;
}
JS: All of this is pretty bare bones, i simply want to draw a shape (for now) but context.fillRrect doesn't seem to be working... i don't know why tho
var canvas = document.getElementsByTagName("canvas")[0];
var context = canvas.getContext("2d");
context.fillStyle("red");
context.fillRect(4, 5, 132, 132);
change
context.fillStyle("red");
to
context.fillStyle = "red";
to make it work: https://jsfiddle.net/t0yqm6jb/
Related
I am new to javascript, I tried to change the color of an element (circle) when clicking on a button but it doesn't work for me and i don't know what to do, here is the script:
I have 2 files(html and css):
html file:
<!DOCTYPE html>
<html>
<head> <title> www.tothemoon.com</title>
<link rel="stylesheet" type="text/css" href="Mpage.css"/>
</head>
<body>
<button id= "but" onclick="FM()" style="font-size:50px; background-color:blue; border:none">try me </button>
<div class="circle", style="color:#1c87c9"> text </div>
<script>
var cir=document.querySelector(".circle");
function FM(){
cir.style.backgroundColor ="yellow";
}
</script>
</body>
</html>
CSS file:
.circle {
background-color: #ccb22e;
width: 200px;
height: 200px;
border-radius: 50%;
}
It works great, it's exactly the code you attached
.circle {
background-color: #ccb22e;
width: 200px;
height: 200px;
border-radius: 50%;
}
<!DOCTYPE html>
<html>
<head> <title> www.tothemoon.com</title>
<link rel="stylesheet" type="text/css" href="Mpage.css"/>
</head>
<body>
<button id= "but" onclick="FM()" style="font-size:50px; background-color:blue; border:none">try me </button>
<div class="circle", style="color:#1c87c9"> text </div>
<script>
var cir=document.querySelector(".circle");
function FM(){
if(cir.style.backgroundColor == "yellow")
cir.style.backgroundColor = "#ccb22e";
else
cir.style.backgroundColor ="yellow";
}
</script>
</body>
</html>
I can't put the WEBgl canvas of p5js, with width 100% and height 100%, inside the <section> tag. This tag is inside the <main> tag, which in turn is inside the <body> tag. As per the html code.
My layout has a right area (right <aside>), a center area (<main>) and a left area (<aside> left). I want the canvas to be inside the central area, as shown in FIGURE 1 below. The p5js canvas works normally in html, but it is next to the <aside> tag on the right, as shown in FIGURE 2.
Another thing, in addition to placing the canvas inside the central area (<main> tag), I need it to have width: 100% and height:100% inside <main>.
OBS: the tag <canvas> would solve the problem of being inside main and with width: 100% and height:100%. However, I don't think I could use webgl or p5js on it. That's why I created the canvas via p5js.
FIGURE 1
enter image description here
FIGURE 2
enter image description here
The html code is:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Teste</title>
<script src="p5/p5.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<aside class="sides">
<p>RIGHT</p>
</aside>
<section id="_center">
<p>CENTER</p>
<!-- <script src="sketch.js"></script> -->
</section>
<aside class="sides">
<p>LEFT</p>
</aside>
</main>
</body>
</html>
The CSS code is:
#charset "UTF-8";
:root {
--cor0: #EEEEEE;
--cor1: #E0E0E0;
--cor2: #E0E0E0;
--cor3: #EDEDED;
--cor4: #C7C7C7;
--fonte-padrão: Arial, Verdana, Helvetica, sans-verif;
}
* {
margin: 0px;
padding: 0%;
}
html,
body {
height: 100%;
font-size: 1.5em;
text-align: center;
}
main {
background-color: white;
display: flex;
flex-direction: row;
height: 70%;
width: auto;
padding: 3px;
box-shadow: 1px 1px 1px black;
border: 0.5px solid black;
}
main aside.sides {
background-color: var(--cor2);
width: 5%;
min-width: 150px;
min-height: 500px;
}
main section#_center {
background-image: linear-gradient(to right, var(--cor0), var(--cor4));
width: 90%;
min-width: 500px;
min-height: 500px;
}
And sketch.js from p5js is:
function setup(){
cnv = createCanvas(600, 600, WEBGL);
}
//function to draw with or whithout loop, use redraw() if no loop
function draw() {
background(0, 110, 255)
}
I have run into a problem that I can't figure out. For some reason, my SVG images keep getting cut off. I have been digging through the SVG docs.
Here is the code:
var draw = SVG().addTo('#drawing').size(300, 300)
var Circle = draw.symbol();
Circle.circle(50).fill('none').stroke({
color: 'black',
width: 1
})
draw.use(Circle).move(50, 200)
draw.use(Circle).move(100, 200)
<html>
<head>
<title>SVG.js</title>
<script src="https://cdn.jsdelivr.net/npm/#svgdotjs/svg.js#3.0/dist/svg.min.js"></script>
</head>
<body>
<div style="margin: 1%; border: 1px solid black; height: 500px;">
<div id="drawing" style="margin: 1%; border: 1px solid red;height: 95%"></div>
</div>
</body>
</html>
So it looks like the line is being drawn either using outside or centered so the edge is being cut off. What I did was transform the circle to move it by 1px on the x and y axis. I looked through the docs and didn't see a way to change the line style which would also probably fix this, but I couldn't see anything.
<html>
<head>
<title>SVG.js</title>
<script src="https://cdn.jsdelivr.net/npm/#svgdotjs/svg.js#3.0/dist/svg.min.js"></script>
</head>
<body>
<div>
<div id="drawing"></div>
</div>
</body>
<script>
var draw = SVG().addTo('#drawing').size(52, 52)
var Circle = draw.symbol();
Circle.circle(50).fill('none').stroke({ color: 'black', width: 1 }).transform({
translateX: 1,
translateY: 1
})
draw.use(Circle).move(0, 0)
</script>
</html>
Your example
<html>
<head>
<title>SVG.js</title>
<script src="https://cdn.jsdelivr.net/npm/#svgdotjs/svg.js#3.0/dist/svg.min.js"></script>
</head>
<body>
<div style="margin: 1%; border: 1px solid black; height: 500px;">
<div id="drawing" style="margin: 1%; border: 1px solid red;height: 95%"></div>
</div>
</body>
<script>
var draw = SVG().addTo('#drawing').size(300, 300)
var Circle = draw.symbol();
Circle.circle(50)
.fill('none')
.stroke({ color: 'black', width: 1 })
.transform({translateX: 1, translateY: 1})
draw.use(Circle).move(50, 200)
draw.use(Circle).move(102, 200)
</script>
</html>
Alternative without transform per your comments
var draw = SVG().addTo('#drawing').size(300, 300)
var Circle = draw.symbol();
Circle.circle(50)
.fill('none')
.stroke({ color: 'black', width: 1 })
draw.use(Circle).move(50, 200)
draw.use(Circle).move(102, 200)
#drawing symbol {
overflow: visible;
}
<html>
<head>
<title>SVG.js</title>
<script src="https://cdn.jsdelivr.net/npm/#svgdotjs/svg.js#3.0/dist/svg.min.js"></script>
</head>
<body>
<div style="margin: 1%; border: 1px solid black; height: 500px;">
<div id="drawing" style="margin: 1%; border: 1px solid red;height: 95%"></div>
</div>
</body>
</html>
I tried $.find("paper-ripple").animate(); described at https://elements.polymer-project.org/elements/paper-ripple but this does not work.
You can use simulatedRipple() method of paper-ripple.
<!DOCTYPE html>
<html>
<head>
<base href="https://polygit.org">
<script src="/components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="/components/polymer/polymer.html">
<link rel="import" href="/components/paper-ripple/paper-ripple.html">
<style>
.card {
position: relative;
display: inline-block;
width: 300px;
height: 240px;
vertical-align: top;
background-color: #fff;
box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24);
}
</style>
</head>
<body>
<template id="demo" is="dom-bind">
<div class="card">
<paper-ripple recenters></paper-ripple>
</div>
</template>
</body>
<script>
var demo = document.querySelector('#demo');
demo.addEventListener('dom-change', function() {
setInterval(triggerRipple, 1000);
});
triggerRipple = function() {
var paperRipple = document.querySelector('paper-ripple');
paperRipple.simulatedRipple();
}
</script>
</html>
I've copied the code that Fabricjs gives and put it into a file called Fabric.js. I then haave made a file called Canvas.js. I've imported both into my HTML files and am trying to print out a rectangle but nothing works. What am I doing wrong?
HTML:
<!doctype html>
<html lang="en";>
<head>
<meta charset="utf-8" />
<title>CustomCase</title>
<link rel="stylesheet" href="HeaderFooter.css">
<link rel="stylesheet" href="SkapaDesign.css">
<script src="Fabric.js"></script>
<script src="Canvas.js"></script>
</head>
<body>
<div id="Wrapper">
<header id="Header"></header>
<section id="Body">
<div id="LeftColumn">
<canvas id="Canvas"></canvas>
</div>
</section>
<footer id="Footer"></footer>
</div>
</body>
</html>
CSS:
#Body{
height: 675px;
}
#LeftColumn{
float: left;
width: 355px;
margin-top: 20px;
}
#Canvas{
float: left;
margin-left: 15px;
overflow: hidden;
}
JavaScript:
$(document).ready(function(){
var canvas = new fabric.Canvas('Canvas');
var rect = new fabric.Rect({
top: 100,
left: 100,
width: 60,
height: 70,
fill: 'red'
});
canvas.add(rect);
});
Because you're wrapping your code with:
$(document).ready(function(){});
You'll need to include the jQuery library in your file as well.
Example: http://jsfiddle.net/d3RGY/161/