Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <html>
    <head>
        <meta charset = "utf-8">
        <title>JS Drawing</title>
    </head>
    <body>
        <canvas id="meow" width="200px" height="200px">
            Hi there!
        </canvas>
    </body>
  </html>
              
            
!

CSS

              
                * {
  background: lightgrey;
}         

canvas {
  border: 1px solid black;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

              
            
!

JS

              
                //Naming variables to use for drawings
        var canvas, ctx, w, h;
//Variables for location and movement        
        // as for rectangle location and speed
        var recX = 10;      // location in x axis
        var recY = 10;      // location in y axis
        var speed = 1;
        var rectWidth = 30;
        var rectHeight = 30;
        // as for circle location and speed
        var cirx = 100;    // location in x axis
        var ciry = 100;    // location in y axis
        var rad = 15;      // radius
        var spx = 2;       // speed in x axis
        var spy = 1;       // speed in y axis
        
        // loading drawings when loading screen
        window.onload = function init() {
        //Defining The variables
            // a. Calling the canvas
            canvas = document.querySelector("#meow");
            // Saving width & height info.
            w = canvas.width;
            h = canvas.height;
            
            // b. getting the drawing tool
            ctx = canvas.getContext('2d');
            
        //setting Animation details into a main function as a way to organize content
            recLoop();  // This will contain the animation details for all shapes
        };
        //This is the main loop we set to control all the functions...
        function recLoop() {
        // 1- clearing canvas
            ctx.clearRect(0, 0, w, h);
        // drawing process    
            // a. filled rectangle
            filledRect(recX, recY, "red");
            // b. filled circle
            filledCircle(cirx, ciry, rad, "green");
            
        //animation movements
            //a. the rectangle
            recAnimation();     // this is to call the function For rectangle animation
            //--------------------
            // b. for the circle
            cirAnimation();     // this is to call the function For circle animation
        }
        
        function filledRect(x, y, color) {
            //Saving the above tempelate (x, y, color) to be able to substitute them in line 61
            ctx.save();
            // translate coordinate system & draw relative to it
            ctx.translate(x, y);        // Check line 61 >> I substituted the x,y values with locations
            // defining the color so that we can substitute in line 61
            ctx.fillStyle = color;
            // width & height
            ctx.fillRect(0, 0, rectWidth, rectHeight); // x & y are set to 0 and I set width and height to be 30 in each
            // restoring context to load all the above parameters
            ctx.restore();
        }

        // This controls the drawing process of a circle
        function filledCircle(x, y, rad, color) {
            //Saving the above tempelate (x, y, rad, color) to be able to substitute them in line 63
            ctx.save();
            // translate coordinate system & draw relatie to it
            ctx.translate(x, y);       // Check line 63 >> I substituted the x,y values with locations 
            //identifying the color so that we can substitute in line 61
            ctx.fillStyle = color;
            // identifying radius
            ctx.beginPath();
            ctx.arc(0, 0, rad, 0, 2*Math.PI);
            ctx.fill();
            //restoring
            ctx.restore();
        }
        
        //Setting the animation rules
        function recAnimation() {
                recX += speed;     // adding speed to the location in x direction
                        
            // Testing collision against left and right walls
            if (((recX + rectWidth) > w) || (recX < 0)) {
                speed = -speed;     //speed direction changes!
            }
            requestAnimationFrame(recLoop); //getting new animation frame for the rectangle
        }
        
        function cirAnimation() {
            // I made the movement in x and y directions
            cirx += spx;
            ciry += spy;
        //collision with walls
            // 1. vertical walls --> right wall
            if ((cirx + rad) > w) {
                spx = -spx;
                cirx = w - rad;
            } else if ((cirx - rad) < 0) {
                spx = -spx;
                cirx = rad; //putting ball at collision point
            }
            
            // 2. horizontal walls --> right one
            if ((ciry + rad) > h) {
                spy = -spy;
                ciry = h - rad; //putting ball at collision point
            } else if ((ciry - rad) < 0) {
                spy = -spy;
                ciry = rad; //putting ball at collision point
            }
        }
              
            
!
999px

Console