HTML + CSS + JAVASCRIPT

CANVAS

canvas id="myCanvas-09" width="370" height="270" style="border:2px 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;
}
span#span-02{
margin:5px;
padding:5px;
}
span#span-03{
margin:5px;
padding:5px;
}
span#span-04{
margin:5px;
padding:5px;
}
}

@media screen and (max-width: 1000px) {
h3{
font-size:18px;
} span#span-01{
font-size:16px;
}
}

@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#equacaoHoraria{
height:500px;
}
div#equacaoHoraria span#span-01{
border:2px solid #000;
width:70%;
height:;
margin-left:15%;
}
div#equacaoHoraria span#span-02{
clear:both;
width:70%;
margin-left:15%;
height:350px;
}
div#velocidadeMedia{
height:650px;
}
div#velocidadeMedia span#span-01{
border:2px solid #000;
width:70%;
margin-left:15%;
}
div#velocidadeMedia span#span-03{
clear:both;
width:70%;
margin-left:15%;
height:250px;
}
div#velocidadeInstantanea{
height:650px;
}
div#velocidadeInstantanea span#span-01{
border:2px solid #000;
width:70%;
margin-left:15%;
}
div#velocidadeInstantanea span#span-04{
clear:both;
width:70%;
margin-left:15%;
height:250px;
}
}

@media screen and (max-width: 700px) {
p#p-css{
font-size:10px;
}
div#equacaoHoraria{
height:500px;
}
div#equacaoHoraria span#span-01{
border:2px solid #000;
width:70%;
margin-left:15%;
}
div#equacaoHoraria span#span-02{
clear:both;
width:70%;
margin-left:15%;
height:350px;
}
div#velocidadeMedia{
height:650px;
}
div#velocidadeMedia span#span-01{
border:2px solid #000;
width:70%;
margin-left:15%;
}
div#velocidadeMedia span#span-03{
clear:both;
width:70%;
margin-left:15%;
height:250px;
}
div#velocidadeInstantanea{
height:650px;
}
div#velocidadeInstantanea span#span-01{
border:2px solid #000;
width:70%;
margin-left:15%;
}
div#velocidadeInstantanea span#span-04{
clear:both;
width:70%;
margin-left:15%;
height:250px;
}
}

JAVASCRIPT

var c = document.getElementById ("myCanvas-09");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.strokeStyle = "black";
ctx.moveTo(30,30);
ctx.lineTo(30,260);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(10,250);
ctx.lineTo(330,250);
ctx.strokeStyle = "black";
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.moveTo(30,30);
ctx.lineTo(20,40);
ctx.strokeStyle = "black";
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.moveTo(30,30);
ctx.lineTo(40,40);
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.moveTo(330,250);
ctx.lineTo(320,240);
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.moveTo(330,250);
ctx.lineTo(320,260);
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.fillStyle = "black";
ctx.strokeStyle = "black";
ctx.font = "12pt sans-serif";
ctx.fillText("S(t)",50,40);
ctx.fillText("t",340,260);
ctx.fillText("So",40,210);
ctx.fill();
ctx.stroke();

ctx.beginPath();
ctx.moveTo(30,200);
ctx.lineTo(300,40);
ctx.strokeStyle = "red";
ctx.stroke();
ctx.closePath();