HTML + CSS + JAVASCRIPT

CANVAS

canvas id="myCanvas-12" width="180" height="240" style="border:1px solid red;"> Your browser does not support the HTML5 canvas tag. /canvas>

CSS - Responsivo

@media screen and (max-width: 1200px) {

h3 {
font-size:20px;
}

p#paragrafo {
font-size:18px;
}

span#span-01 {
font-size:17px;
}
}

@media screen and (max-width: 1000px) {

h3 {
font-size:18px;
}

span#span-01 {
font-size:16px;
}

h3.par-03 {
font-size:18px;
}
}

@media screen and (max-width: 900px) {

h3 {
font-size:16px;
}

span#span-01 {
font-size:15px;
}
}

@media screen and (max-width: 800px) {

p#p-css {
font-size:11px;
}

h3 {
font-size:15px;
}

div#movimentoUniformementeVariado span#span-01 {
border:2px solid #000;
width:80%;
margin-left:10%;
}

div#movimentoUniformementeVariado span#span-08 {
clear:both;
width:80%;
margin-left:10%;
height:250px;
}
}

@media screen and (max-width: 700px) {

p#p-css {
font-size:10px;
}

div#movimentoUniformementeVariado span#span-01 {
width:90%;
margin-left:5%;
}

div#movimentoUniformementeVariado span#span-08 {
width:90%;
margin-left:5%;
}
}

@media screen and (max-width: 600px) {

div#movimentoUniformementeVariado span#span-01 {
width:95%;
margin-left:2%;
}

div#movimentoUniformementeVariado span#span-08 {
width:95%;
margin-left:2%;
}
}

JAVASCRIPT

var c = document.getElementById ("myCanvas-12");
var ctx = c.getContext ("2d");

ctx.beginPath();
ctx.fillStyle = "blue";
ctx.fillRect(10,190,160,40);
ctx.fill();

ctx.beginPath();
ctx.strokeStyle = "#000";
ctx.moveTo(50,30);
ctx.lineTo(50,150);
ctx.moveTo(50,30);
ctx.lineTo(35,45);
ctx.moveTo(50,30);
ctx.lineTo(65,45);
ctx.lineWidth = 5;
ctx.stroke();

ctx.beginPath();
ctx.strokeStyle = "#000";
ctx.moveTo(115,30);
ctx.lineTo(115,150);
ctx.moveTo(115,150);
ctx.lineTo(100,135);
ctx.moveTo(115,150);
ctx.lineTo(130,135);
ctx.lineWidth = 5;
ctx.stroke();

ctx.beginPath();
ctx.strokeStyle = "red";
ctx.moveTo(160,50);
ctx.lineTo(160,110);
ctx.moveTo(160,110);
ctx.lineTo(150,100);
ctx.moveTo(160,110);
ctx.lineTo(170,100);
ctx.lineWidth = 3;
ctx.stroke();

ctx.beginPath();
ctx.fillStyle = "black";
ctx.strokeStyle = "black";
ctx.font = "12pt sans-serif";
ctx.fillText("a<0",10,70);
ctx.fillText("a>0",70,120);
ctx.fillText("g",140,70);
ctx.fill();
ctx.stroke();

ctx.beginPath();
ctx.fillStyle = "#fff";
ctx.strokeStyle = "#fff";
ctx.font = "12pt sans-serif";
ctx.fillText("Solo",20,220);
ctx.fill();
ctx.stroke();