Canvas draw

In this example below you will see how to do a Canvas draw with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by mfilippovsky, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright mfilippovsky ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Canvas draw</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<div class="canvas-wrapper">
  <canvas id="infografix" width="1920" height="800" style="width: 1920px; height: 800px;"></canvas>
  <div class="infotext" style="top: 210px; left: 1631px;"><span>12</span> partners in Russia, Kazakhstan, Ukraine, Poland, Saudi Arabia
    
  </div>
  <ul class="team-plus">
    <li class="team-plus__item"><em>15</em> years in IT business
      
    </li>
    <li class="team-plus__item"><em>170+</em> experienced engineer
      
    </li>
    <li class="team-plus__item"><em>300+</em> completed projects in Italy, Portugal, Russia, Kazakhstan and Ukraine
      
    </li>
    <li class="team-plus__item">Sales office in Melbourne, Australia</li>
    <li class="team-plus__item">Project offices and development centers in Russia, Ukraine and Kazakhstan</li>
    <li class="team-plus__item"><em>12</em> partners in Russia, Kazakhstan, Ukraine, Poland, Saudi Arabia</li>
  </ul>
</div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/mfilippovsky/canvas-draw-JNXPVW */
/* /*
 *  Commons
 */
html,
body {
  height: 100%;
}
.page__wrapper {
  min-height: 100%;
  margin-bottom: -50px;
}
* html .page__wrapper {
  height: 100%;
}
.page__buffer {
  height: 50px;
}
body {
  margin: 0;
  font-family: 'Segoe UI', 'Arial', sans-serif;
  font-size: 18px;
  font-weight: 300;
  color: #2f2e2e;
}
html,
body,
#app,
.page {
  height: 100%;
}
.page {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
}
html.ReactModal__Html--open,
body.ReactModal__Body--open {
  overflow: hidden;
}
a[href*='.pdf'] {
  padding-left: 35px;
  position: relative;
  color: #208ebc;
}
a[href*='.pdf']:before {
  content: '';
  width: 26px;
  height: 30px;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -14px;
}
button,
input,
optgroup,
select,
textarea {
  font: inherit;
}
button {
  cursor: pointer;
}
/*
 *  Variables
 */
body {
  overflow-x: hidden;
  background: #565656;
}
/*
 *  Mixins
 */
.offers-text__tablets {
  width: 90%;
  text-align: justify;
  margin: 0 auto;
  float: none;
}
.about-learn-more-container {
  padding: 70px 0 10px;
  text-align: center;
}
.about-learn-more-button.about-learn-more-button {
  display: inline-block;
  width: auto;
  padding-right: 30px;
  padding-left: 30px;
  text-decoration: none;
}
.about-learn-more-button.about-learn-more-button:before {
  display: none;
}
.canvas-wrapper {
  position: relative;
  overflow: hidden;
}
@media screen and (max-width: 800px) {
  .canvas-wrapper {
    display: none;
  }
}
.infotext {
  position: absolute;
  width: 250px;
  font-size: 18px;
  line-height: 1.4;
  text-align: center;
  color: #fff;
}
.infotext span {
  color: #1de2f9;
}
.team {
  position: relative;
  padding-top: 70px;
  background: #000 url('../img/content/systemz-back.png') no-repeat;
  background-size: cover;
}
@media screen and (max-width: 800px) {
  .team {
    padding-bottom: 70px;
  }
}
.team__cup {
  font-weight: 200;
  line-height: 18px;
  text-align: center;
  color: #fff;
  padding-top: 150px;
  position: absolute;
  top: calc(50% - 75px);
  left: 50px;
}
.team__cup:before {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  content: '';
  top: 0;
  background-image: url('../img/content/cup.png');
  width: 120px;
  height: 125px;
}
@media screen and (max-width: 1200px) {
  .team__cup {
    display: none;
  }
}
.team__desc {
  max-width: 1000px;
  margin: 0 auto -105px;
  padding: 0 20px;
  line-height: 1.7;
  text-align: center;
  color: #fff;
}
@media screen and (max-width: 800px) {
  .team__desc {
    text-align: left;
    margin-bottom: 0;
  }
}
.team-plus {
  display: none;
  margin: 60px 0 0;
}
@media screen and (max-width: 800px) {
  .team-plus {
    display: block;
  }
}
.team-plus__item {
  padding: 0;
  margin-bottom: 15px;
  line-height: 1.6;
  color: #fff;
}
.team-plus__item em {
  color: #1de2f9;
  font-style: normal;
}
.addresses .container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  padding-top: 60px;
  padding-bottom: 60px;
}
.address {
  margin: 0 30px;
  max-width: 400px;
  text-align: center;
}
@media screen and (max-width: 800px) {
  .address {
    max-width: 100%;
    margin-bottom: 30px;
  }
  .address:last-child {
    margin-bottom: 0;
  }
}
.address__title,
.address__address,
.address__contact {
  margin: 0;
}
.address__title {
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
}
.address__address {
  margin: 20px 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  color: #545454;
}
.address__contact {
  margin-bottom: 10px;
}
.address__contact a {
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  color: inherit;
}


/*Downloaded from https://www.codeseek.co/mfilippovsky/canvas-draw-JNXPVW */
var canvas = document.getElementById("infografix");
var context = canvas.getContext("2d");

const stickHeights = [130, 42, 130, 113, 80, 40];
const infoBlockHeights = [0, 40, 0, 40, 0, 70];
const ballRadius = 9;
let   marginLeft = 150;
const marginRight = 100;
const circleRadius = 46;
const orbitHeight = 14;
const textVerticalMargin = 25;
const infoBlockWidth = 250;

let w, h, horizon, lineWidth, step;

function initVars() {
  w = window.innerWidth;
  h = canvas.offsetHeight;

  if (w < 1200) {
    marginLeft = 75;

    if (w < 800) {
      w = 800;
    }
  } else {
    marginLeft = Math.floor(w * 0.3) + 60;
  }

  horizon = Math.floor(h / 2);
  lineWidth = w - marginLeft - marginRight - (2 * circleRadius) - (2 * orbitHeight);

  if (lineWidth < 525) {
    lineWidth = 525;
  }
  step = Math.floor(lineWidth / 5);
}

function drawCircle(top, left, radius, idx) {
      context.beginPath();
      context.arc(left, top, radius, 0, 2 * Math.PI, false);
      context.fill();
      context.stroke();

      context.beginPath();
      if (idx % 2) {
        context.arc(left, top, radius + orbitHeight, Math.PI * 3 / 2, Math.PI * 2, false);
      } else {
        context.arc(left, top, radius + orbitHeight, Math.PI / 2, Math.PI, false);
      }
      context.stroke();
      const vDirection = idx % 2 ? 1 : -1;
      const stickEndY = top - (vDirection * (stickHeights[idx] + ballRadius + circleRadius));

      context.beginPath();
      context.moveTo(left, top);
      context.lineTo(left, stickEndY);
      context.stroke();

      context.beginPath();
      context.arc(left, stickEndY, ballRadius, 0, 2 * Math.PI, false);
      context.fill();
      context.stroke();

      const icon = new Image();
      icon.src = infotext[idx].url;
      icon.onload = () => context.drawImage(icon, left - (icon.width / 2), horizon - (icon.height / 2));

    }

function drawItAll() {
      initVars();
      canvas.width = w;
      canvas.height = h;
      canvas.style.width = `${w}px`;
      canvas.style.height = `${h}px`;

      context.clearRect(0, 0, canvas.width, canvas.height);

      context.beginPath();
      context.strokeStyle = 'white';
      context.fillStyle = 'white';
      context.lineWidth = 1;
      context.moveTo(marginLeft, horizon);
      context.lineTo(marginLeft + orbitHeight + circleRadius + (step * 5) + orbitHeight + circleRadius, horizon);
      context.stroke();

      for (let i = 0; i < 6; i++) {
        const centerLeft = marginLeft + orbitHeight + circleRadius + (step * i);
        drawCircle.call(this, horizon, centerLeft, circleRadius, i);
      }
    }

    drawItAll.call(this);

var infotext = [
    {
      number: '15',
      text: 'years in IT business',
      url: icon1,
    },
    {
      number: '170+',
      text: 'experienced engineers',
      url: icon2,
    },
    {
      number: '300+',
      text: 'completed projects in Italy, Portugal, Russia, Kazakhstan and Ukraine',
      url: icon3,
    },
    {
      number: '',
      text: 'Sales office in Melbourne, Australia',
      url: icon4,
    },
    {
      number: '',
      text: 'Project offices and development centers in Russia, Ukraine and Kazakhstan',
      url: icon5,
    },
    {
      number: '12',
      text: 'partners in Russia, Kazakhstan, Ukraine, Poland, Saudi Arabia',
      url: icon6,
    },
  ]

Comments