JS Graphics

JS Graphics

JavaScript graphics on the web usually means drawing with Canvas, generating charts with libraries (Plotly, Chart.js, Google Charts), or creating data-driven visuals with D3.js. This page gives a clean overview and starter examples.

JS Canvas

Canvas is a bitmap drawing surface. You draw using the 2D context API.

<canvas id="cv" width="360" height="180" style="border:1px solid #ddd;"></canvas>

<script>
const canvas = document.querySelector("#cv");
const ctx = canvas.getContext("2d");

// rectangle
ctx.fillStyle = "#0d6efd";
ctx.fillRect(20, 20, 120, 60);

// line
ctx.strokeStyle = "#111";
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(20, 120);
ctx.lineTo(260, 120);
ctx.stroke();

// text
ctx.fillStyle = "#111";
ctx.font = "16px Arial";
ctx.fillText("Canvas demo", 160, 55);
</script>

Basic shapes (circle):

<canvas id="cv2" width="240" height="160" style="border:1px solid #ddd;"></canvas>

<script>
const c = document.querySelector("#cv2");
const ctx = c.getContext("2d");

ctx.fillStyle = "#20c997";
ctx.beginPath();
ctx.arc(90, 80, 45, 0, Math.PI * 2);
ctx.fill();
</script>

Animation tip: use requestAnimationFrame.

<canvas id="cv3" width="360" height="120" style="border:1px solid #ddd;"></canvas>

<script>
const canvas = document.querySelector("#cv3");
const ctx = canvas.getContext("2d");

let x = 20;
function frame() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  ctx.fillStyle = "#fd7e14";
  ctx.fillRect(x, 40, 40, 40);

  x += 2;
  if (x > canvas.width) x = -40;

  requestAnimationFrame(frame);
}

requestAnimationFrame(frame);
</script>

JS Plotly

Plotly is a charting library with interactive charts (zoom, hover, tooltips). It is often used for dashboards.

<!-- Include Plotly (example) -->
<script src="https://cdn.plot.ly/plotly-2.30.0.min.js"></script>

<div id="plot" style="max-width:640px;"></div>

<script>
const trace = {
  x: [1, 2, 3, 4],
  y: [10, 15, 13, 18],
  type: "scatter"
};

Plotly.newPlot("plot", [trace], {
  title: "Plotly Example"
});
</script>

JS Chart.js

Chart.js is a popular, lightweight chart library (canvas-based). Great for common charts.

<!-- Include Chart.js (example) -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<canvas id="chart" width="400" height="200"></canvas>

<script>
const ctx = document.querySelector("#chart");

new Chart(ctx, {
  type: "bar",
  data: {
    labels: ["A", "B", "C"],
    datasets: [{
      label: "Score",
      data: [12, 19, 7]
    }]
  },
  options: {
    responsive: true
  }
});
</script>

JS Google Chart

Google Charts provides many chart types and integrates well with Google ecosystem. It loads through a Google loader script.

<script type="module">
// Google Charts uses a loader script (example idea):
// <script src="https://www.gstatic.com/charts/loader.js"></script>
// google.charts.load("current", { packages: ["corechart"] });
// google.charts.setOnLoadCallback(draw);
//
// function draw() {
//   const data = google.visualization.arrayToDataTable([
//     ["Year", "Sales"],
//     ["2024", 100],
//     ["2025", 120]
//   ]);
//
//   const chart = new google.visualization.LineChart(document.getElementById("gchart"));
//   chart.draw(data, { title: "Google Chart Example" });
// }
</script>

<div id="gchart" style="max-width:640px; height:320px;"></div>

JS D3.js

D3.js is a powerful library for data-driven documents. It binds data to the DOM (often SVG) and is best when you need custom visualizations.

<!-- Include D3 (example) -->
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>

<svg id="viz" width="360" height="120" style="border:1px solid #ddd;"></svg>

<script>
const data = [10, 30, 20, 50];

d3.select("#viz")
  .selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", (d, i) => i * 80 + 10)
  .attr("y", d => 110 - d)
  .attr("width", 50)
  .attr("height", d => d);
</script>

Which One Should You Use?

• Canvas: custom drawing, games, pixel work, fast rendering.
• Chart.js: common charts quickly (simple dashboards).
• Plotly: interactive analytics charts (zoom/hover tools).
• Google Charts: wide set of charts, simple setup.
• D3.js: maximum customization and bespoke visualizations.

Next Step

Continue with JS Examples (mixed real-world patterns) or JS Reference (quick lookup pages) to complete the advanced documentation set.