cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmloctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

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.

            
              <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Bob Esponja Con Canvas</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <script src="js/vendor/modernizr-2.6.2.min.js"></script>
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        <main>
            <h1>Bob Esponja Con Canvas.</h1>
            <canvas class='bob_canvas' id='bob_canvas' width='600' height='600'>
            </canvas>
        </main>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>
    </body>
</html>
            
          
!
            
              /* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

html {
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */

audio,
canvas,
img,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* =================================================

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
html {
    margin: 0 auto;
}
body {
    width: 100%;
    background-color: lightsalmon;
}
h1 {
    margin-left: 200px;
    color: crimson;
    font-family: monospace;
    font-size: 2.5em;
}
.bob_canvas {
    margin-left: 200px;
    border:1px solid #000000;
    background-color: #105cb6;
}















/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}
            
          
!
            
              var canvas, ctx;
canvas = document.querySelector('#bob_canvas');
ctx = canvas.getContext('2d');

bobEsponja();

// Bob Esponja
function bobEsponja() {
    cuerpo();
    camisa();
    corbata();
    pantalon();
    cinturon();
    ojos();
    iris();
    pupila();
    pestanyas();
    nariz();
    boca();
    dientes();
    mofletes();
    poros();
}

// Cuerpo
function cuerpo() {
    ctx.beginPath();
    ctx.lineWidth = '2.5';
    ctx.strokeRect(100, 100, 400, 450);
    ctx.fillStyle = '#F5EE31';
    ctx.fillRect(100,100, 400, 450);
    ctx.stroke();
    ctx.closePath();
}

// Camisa
function camisa() {
    ctx.beginPath();
    ctx.moveTo(100, 400);
    ctx.lineTo(500, 400);
    ctx.moveTo(100, 475);
    ctx.lineTo(500, 475);
    ctx.fillStyle = 'white';
    ctx.fillRect(100, 400, 400, 75);
    ctx.stroke();
    ctx.closePath();
// Cuello Camisa
    ctx.fillStyle = 'white';
// Solapa Izqda.
    ctx.beginPath();
    ctx.moveTo(200, 400);
    ctx.lineTo(230, 430);
    ctx.lineTo(290, 400);
    ctx.lineTo(200, 400);
// Solapa Dcha.
    ctx.moveTo(320, 400);
    ctx.lineTo(350, 430);
    ctx.lineTo(410, 400);
    ctx.lineTo(320, 400);
    ctx.stroke();
    ctx.closePath();
    ctx.fill();
}

// Corbata
function corbata() {
    ctx.fillStyle = 'red';
    ctx.beginPath();
    ctx.moveTo(290, 400);
    ctx.lineTo(305, 440);
    ctx.lineTo(320, 400);
    ctx.lineTo(290, 400);

    ctx.moveTo(305, 440);
    ctx.lineTo(250, 480);
    ctx.lineTo(305, 480);
    ctx.lineTo(360, 480);
    ctx.lineTo(305, 440);
    ctx.stroke();
    ctx.closePath();
    ctx.fill();
}

// Pantalón
function pantalon() {
    ctx.beginPath();
    ctx.fillStyle = '#6A3D13';
    ctx.fillRect(100, 475, 400, 75);
    ctx.closePath();
// Parte inferior corbata
    ctx.beginPath();
    ctx.lineWidth = '2.5';
    ctx.fillStyle = 'red';
    ctx.moveTo(255, 475);
    ctx.lineTo(305, 520);
    ctx.lineTo(355, 475);
    ctx.fill();
    ctx.stroke();
    ctx.closePath();
}

//Cinturón
function cinturon() {
    ctx.beginPath();
    ctx.fillStyle = 'black';
    ctx.fillRect(100, 500, 20, 25);
    ctx.fillRect(130, 500, 50, 25);
    ctx.fillRect(200, 500, 50, 25);
    ctx.fillRect(270, 500, 13, 25);
    ctx.fillRect(340, 500, 50, 25);
    ctx.fillRect(410, 500, 50, 25);
    ctx.fillRect(480, 500, 20, 25);
    ctx.stroke();
    ctx.closePath();
}

// Ojos
function ojos() {
    ctx.beginPath();
    ctx.fillStyle = 'white';
    ctx.arc(250, 200, 50, 0, 2 * Math.PI);
    ctx.fill();
    ctx.stroke();
    ctx.closePath();
    ctx.beginPath();
    ctx.arc(345, 200, 50, 0, 2 * Math.PI);
    ctx.fill();
    ctx.stroke();
    ctx.closePath();
}

// Iris
function iris() {
    ctx.beginPath();
    ctx.fillStyle = '#00AEEF';
    ctx.arc(250, 200, 30, 0, 2 * Math.PI);
    ctx.fill();
    ctx.stroke();
    ctx.closePath();
    ctx.beginPath();
    ctx.fillStyle = '#00AEEF';
    ctx.arc(345, 200, 30, 0, 2 * Math.PI);
    ctx.fill();
    ctx.stroke();
    ctx.closePath();
}

//Pupila
function pupila() {
    ctx.beginPath();
    ctx.fillStyle = 'black';
    ctx.arc(250, 200, 20, 0, 2 * Math.PI);
    ctx.fill();
    ctx.stroke();
    ctx.closePath();
    ctx.beginPath();
    ctx.fillStyle = 'black';
    ctx.arc(345, 200, 20, 0, 2 * Math.PI);
    ctx.fill();
    ctx.stroke();
    ctx.closePath();
}

//Pestañas
function pestanyas() {
    //Pestañas Ojo Izquierdo
    ctx.beginPath();
//Central
    ctx.moveTo(250, 150);
    ctx.lineTo(250, 125);
    ctx.lineWidth = '2.5';
//Izqda.
    ctx.moveTo(225, 155);
    ctx.lineTo(210, 135);
//Dcha.
    ctx.moveTo(275, 155);
    ctx.lineTo(290, 135);
//Pestaña Ojo Derecho
//Central
    ctx.moveTo(345, 150);
    ctx.lineTo(345, 125);
//Izqda.
    ctx.moveTo(325, 155);
    ctx.lineTo(310, 135);
//Dcha.
    ctx.moveTo(365, 155);
    ctx.lineTo(380, 135);
    ctx.stroke();
    ctx.closePath();
}

//Nariz
function nariz () {
    drawEllipse(295, 240, 30, 50, '#F5EE31');
}

//Boca
function boca() {
    ctx.beginPath();
    ctx.moveTo(220, 275);
    ctx.lineWidth = '5';
    ctx.quadraticCurveTo(297.5, 325, 375, 275);
    ctx.stroke();
    ctx.closePath();
}

//Dientes
function dientes() {
    ctx.beginPath();
    ctx.fillStyle = 'white';
    ctx.lineWidth = '5';
    ctx.moveTo(300, 275);
    ctx.strokeRect(300, 300, 20, 30);
    ctx.fillRect(300, 300, 20, 30);
    ctx.moveTo(270, 275);
    ctx.strokeRect(270, 300, 20, 30);
    ctx.fillRect(270, 300, 20, 30);
    ctx.stroke();
    ctx.closePath();
}

//Mofletes
function mofletes() {
    ctx.beginPath();
    ctx.fillStyle = '#F1592A';
    ctx.arc(200, 270, 18, 0, 2 * Math.PI);
    ctx.arc(395, 270, 18, 0, 2 * Math.PI);
    ctx.fill();
    ctx.closePath();
}

//Poros
function poros() {
    ctx.beginPath();
    ctx.fillStyle = '#C0A402';
    ctx.arc(150, 150, 18, 0, 2 * Math.PI);
    ctx.arc(450, 150, 16, 0, 2 * Math.PI);
    ctx.moveTo(150, 360);
    ctx.arc(150, 360, 20, 0, 2 * Math.PI);
    ctx.arc(450, 360, 22, 0, 2 * Math.PI);
    ctx.fill();
    ctx.closePath();
}

function drawEllipse(centerX, centerY, width, height, color) {

    ctx.beginPath();

    ctx.moveTo(centerX, centerY - height/2);

    // Semi-Elipse Dcha.
    ctx.bezierCurveTo(
            centerX + width/2, centerY - height/2,
            centerX + width/2, centerY + height/2,
        centerX, centerY + height/2);

    // Semi-Elipse Izqda
    ctx.bezierCurveTo(
            centerX - width/2, centerY + height/2,
            centerX - width/2, centerY - height/2,
        centerX, centerY - height/2);

    ctx.fillStyle = color;
    ctx.fill();
    ctx.stroke();
    ctx.closePath();
}
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console