Canvas fillText и fillRe c не рендеринг - PullRequest
Новая
       6

Canvas fillText и fillRe c не рендеринг

1 голос
/ 20 января 2020

Кто-нибудь знает HTML5 с Javascript? Холст конкретно. У меня проблемы с рендерингом холста на codepen, он не работает (не отображается прямоугольник и текст на фиолетовом холсте при нажатии на фиолетовую кнопку), но все выглядит нормально в моем коде. Мой кодовый блок: https://codepen.io/elohim-filipe-figueiras-do-campo/pen/QWwJwZX

HTML: 

<!DOCTYPE html>
<html>
  <head>
    <title>"Event Driven Programming"</title>
    <meta charset="UTF-8">
    <link href="https://fonts.googleapis.com/css?family=Ibarra+Real+Nova|Six+Caps&display=swap" rel="stylesheet">
  </head>
  <body>

      <h1>Event Driven Programming</h1>
    <canvas id="First" class="FirstSection" class="_1st">

    </canvas>
    <canvas id="Second" class="SecondSection" class="_2nd">

    </canvas>
    <input type="button" value="Change Color" id="test" onclick="changeColor()">

    <input type="button" value="purple" onclick="doPurple()">
    <input type="button" value="red" onclick="doRed()">

  </body>
</html>

CSS: 

h1{
  border-bottom: 10px solid #FF0000;
  text-align: center;
  width: 400px;
  margin: 40px auto;
  font-family: 'Six Caps', sans-serif;
  font-size: 60px;
}
body{
  padding: 10px;

}
#First{
  margin-bottom: 40px;
  text-align: center;
  border: 10px solid #000000;
  font-family:'Ibarra Real Nova', serif;
  padding: 10px;
  font-size: 20px;
  color: white;

}
#Second{
  margin-bottom: 40px;
  color: white;
  text-align: center;
  border: 10px solid #000000;
  font-family: 'Ibarra Real Nova', serif;
  padding: 10px;
  font-size: 20px;
}
.FirstSection{
  background-color: darkblue;
}
.SecondSection{
  background-color: darkgreen;
}
._1st{
  background-color: #FFCC00;
}
._2nd{
  background-color: #ff00ff;
}

canvas{
  width: 200px;
  height: 200px;
}

Javascript: 

function changeColor(){
  var first =               document.getElementById("First");
  var second = document.getElementById("Second");
  first.className = "_1st";
  second.className = "_2nd";
}
function doPurple(){
  var first = document.getElementById("First");
  first.style.backgroundColor = "purple";
  var ctx = first.getContext("2d");
  ctx.fillStyle = "yellow";
  ctx.fillRect = (10,10,100,100);

  ctx.fillStyle = "black";
  ctx.font = "10px sans";
  ctx.fillText = ("Hello", 110,110);

}

function doRed(){
  document.getElementById("Second").style.backgroundColor = "red";
}
...