Interactive (JavaScript) Canvas Drawing Tool With Free Example

Click the "Run" button to execute JavaScript code from the text area.

Click the "Example" button to load example code.

How It Works

1. Enter Your Code: Use the text area provided to write JavaScript code that interacts with the canvas. The canvas context (ctx) is ready for you to use!
2. Run Your Code: After writing your code, click the "Run" button to see your drawing instantly on the canvas.
3. Example Scenarios: Not sure where to start? Click the "Example" button to load different pre-built scenarios. Each click will showcase a different example of what you can create.
4. Stop Rendering: Click the "Stop" button to clear the canvas and stop any ongoing rendering processes.

Example Code 1: Visualize Fibonacci Sequence

// Example Code: Visualize Fibonacci Sequence

// Clear the canvas
clearCanvas(document.getElementById('myCanvas'));

// Get the canvas context
const ctx = document.getElementById('myCanvas').getContext('2d');

// Number of terms in the sequence
const numTerms = 10;

// Initialize the first two terms
let n1 = 0, n2 = 1, nextTerm;

// Draw the bars representing the Fibonacci sequence
ctx.fillStyle = 'teal';
ctx.font = '16px Arial';

for (let i = 0; i < numTerms; i++) {
    nextTerm = n1 + n2;
    ctx.fillRect(50 * i, ctx.canvas.height - nextTerm * 5, 40, nextTerm * 5);
    ctx.fillText(nextTerm, 50 * i + 10, ctx.canvas.height - nextTerm * 5 - 10);
    n1 = n2;
    n2 = nextTerm;
}

// Log output
updateLog(`Visualized Fibonacci sequence up to ${numTerms} terms.`);
updateMapName('fibonacci_sequence_visualization.js');

    

Example Code 2: Prime Number Checker Visualization

// Example Code: Prime Number Checker Visualization

// Clear the canvas
clearCanvas(document.getElementById('myCanvas'));

// Get the canvas context
const ctx = document.getElementById('myCanvas').getContext('2d');

// Number to check
const number = 29;
let isPrime = true;

// Check if the number is prime
if (number === 1) {
    isPrime = false;
} else {
    for (let i = 2; i <= Math.sqrt(number); i++) {
        if (number % i === 0) {
            isPrime = false;
            break;
        }
    }
}

// Draw the result on the canvas
ctx.fillStyle = isPrime ? 'green' : 'red';
ctx.beginPath();
ctx.arc(400, 250, 100, 0, Math.PI * 2, true);
ctx.fill();

ctx.fillStyle = 'white';
ctx.font = '24px Arial';
ctx.fillText(isPrime ? `${number} is Prime` : `${number} is Not Prime`, 300, 260);

// Log output
updateLog(`${number} is ${isPrime ? 'a' : 'not a'} prime number.`);
updateMapName('prime_number_checker_visualization.js');

    

Example Code 3: Bubble Sort Visualization

// Example Code: Bubble Sort Visualization

// Clear the canvas
clearCanvas(document.getElementById('myCanvas'));

// Get the canvas context
const ctx = document.getElementById('myCanvas').getContext('2d');

// Array to sort
let arr = [64, 34, 25, 12, 22, 11, 90];
let n = arr.length;

// Function to draw the array as bars
function drawArray(arr) {
    clearCanvas(document.getElementById('myCanvas'));
    ctx.fillStyle = 'blue';
    for (let i = 0; i < arr.length; i++) {
        ctx.fillRect(50 * i, ctx.canvas.height - arr[i] * 5, 40, arr[i] * 5);
    }
}

// Bubble Sort
for (let i = 0; i < n - 1; i++) {
    for (let j = 0; j < n - i - 1; j++) {
        if (arr[j] > arr[j + 1]) {
            // Swap arr[j] and arr[j + 1]
            let temp = arr[j];
            arr[j] = arr[j + 1];
            arr[j + 1] = temp;
        }
    }
    drawArray(arr);
}

// Log output
updateLog(`Sorted array using Bubble Sort: ${arr.join(', ')}`);
updateMapName('bubble_sort_visualization.js');

    

Example Code 4: Palindrome Checker Visualization

// Example Code: Palindrome Checker Visualization

// Clear the canvas
clearCanvas(document.getElementById('myCanvas'));

// Get the canvas context
const ctx = document.getElementById('myCanvas').getContext('2d');

// String to check
let str = "A man a plan a canal Panama";
let originalStr = str;
str = str.replace(/[^a-zA-Z0-9]/g, '').toLowerCase();
let reversedStr = str.split('').reverse().join('');
let isPalindrome = (str === reversedStr);

// Draw the result on the canvas
ctx.fillStyle = isPalindrome ? 'green' : 'red';
ctx.font = '30px Arial';
ctx.fillText(originalStr, 50, 250);

// Log output
updateLog(`"${originalStr}" is ${isPalindrome ? '' : 'not '}a palindrome.`);
updateMapName('palindrome_checker_visualization.js');

    

Example Code 5: Factorial Visualization

// Example Code: Factorial Visualization

// Clear the canvas
clearCanvas(document.getElementById('myCanvas'));

// Get the canvas context
const ctx = document.getElementById('myCanvas').getContext('2d');

// Number to calculate factorial
const number = 5;
let factorial = 1;

// Draw the factorial steps as rectangles
ctx.fillStyle = 'purple';
for (let i = 1; i <= number; i++) {
    factorial *= i;
    ctx.fillRect(50 * i, ctx.canvas.height - factorial / 10, 40, factorial / 10);
}

// Log output
updateLog(`Factorial of ${number} is ${factorial}.`);
updateMapName('factorial_visualization.js');

    

Create and visualize custom drawings with our interactive canvas tool. Whether you're testing your JavaScript skills, designing simple graphics, or just having fun, this tool offers a dynamic platform to bring your ideas to life on the canvas.

What You Can Do

• Draw Shapes and Scenes: Use simple shapes like circles, rectangles, and lines to create various graphics.
• Experiment with Colors and Styles: Fill the canvas with colors, gradients, and patterns to bring your drawings to life.
• Test JavaScript Graphics Code: Whether you're a beginner or an experienced coder, test out your JavaScript canvas skills in a dynamic environment.

Ready to Get Started?

Simply type or paste your JavaScript code into the input area, click "Run," and watch your creation come to life. Explore the possibilities, from basic shapes to complex designs—there’s no limit to what you can create!

Tips for Best Results

• Keep It Simple: Start with basic shapes and build your way up to more complex drawings.
• Explore the Examples: Each example provided demonstrates different aspects of canvas drawing—use them as a foundation for your own creations.
• Experiment and Learn: The best way to learn is by doing. Try modifying the examples or writing your code from scratch to see how different commands affect the canvas.