Get started with rough.js CDN

MIT licensed

Rough.js is a versatile library for creating hand-drawn animations and graphics.

Tags:
  • draw
  • graphics
  • svg
  • html5-canvas
  • svg-path
  • canvas
  • sketchy
  • hand drawn

Stable version

Copied!

How to start using rough.js CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with rough.js CDN - cdnhub.io</title>
  <script src="https://cdn.cdnhub.io/rough.js/3.1.0/rough.js"></script>
  <style>
    #canvas {
      width: 300px;
      height: 300px;
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>
  <script>
    const canvas = document.getElementById('canvas');
    const context = canvas.getContext('2d');

    const rough = require('rough'); // CommonJS syntax for Rough.js

    const sketch = new rough.Sketch();
    sketch.setSize(canvas.width, canvas.height);

    const circle = sketch.circle(100, 100, 50);
    circle.fill('rgba(255, 0, 0, 1)');
    circle.stroke('rgba(0, 0, 0, 1)');

    sketch.render(context);
  </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!

All versions