Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Angus McKay
Angus McKay
928 Points

how do i make this bigger

how do i make the java element, if i make the canvas bigger it does nothing.

i would love a bit of help with this, thanks

<!DOCTYPE html> <html lang="en"> <head> </head> <header></header> <body> <canvas id="Sips_" data-mc="face" width="500" height="72" /> </body>

<script>
var username = document.querySelector("[data-mc=\"face\"").getAttribute("id");

function mc_face(user) { // Set the Canvas' context: var canvas = document.querySelector("#" + user); var ctx = canvas.getContext("2d");

// Remove image smoothing (for up-sizing):
ctx.mozImageSmoothingEnabled = false;
ctx.webkitImageSmoothingEnabled = false;
ctx.msImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false;

// Get the URL to the User's MC Skin:
var skin = new Image();
skin.src = "http://s3.amazonaws.com/MinecraftSkins/" + user + ".png";

// Draw the Skin onto the canvas:
skin.onload = function() {
    // Face:
    ctx.transform(1, -0.5, 0, 1.25, 0, 0);
    ctx.drawImage(skin, 8, 8, 8, 8, 32, 39, 32, 32);
    // Side of head:
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    ctx.transform(1, 0.5, 0, 1.25, 0, 0);
    ctx.drawImage(skin, 0, 8, 8, 8, 0, 13, 32, 32);
    // Top of head:
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    ctx.rotate(Math.PI/-4);
    ctx.transform(1, 0.333, 0.333, 1, -1, -0.5);
    ctx.drawImage(skin, 8, 0, 8, 8, -17, 17, 35, 35);
    // Hood front:
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    ctx.transform(1, -0.5, 0, 1.25, 0, 0);
    ctx.drawImage(skin, 40, 8, 8, 8, 32, 39, 32, 32);
    // Hood side:
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    ctx.transform(1, 0.5, 0, 1.25, 0, 0);
    ctx.drawImage(skin, 32, 8, 8, 8, 0, 13, 32, 32);
    // Hood top:
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    ctx.rotate(Math.PI/-4);
    ctx.transform(1, 0.333, 0.333, 1, -1, -0.5);
    ctx.drawImage(skin, 40, 0, 8, 8, -17, 17, 35, 35);
    // Shading side:
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    ctx.transform(1, 0.5, 0, 1.25, 0, 0);
    ctx.fillStyle = "rgba(0, 0, 0, 0.15)";
    ctx.fillRect(0, 13, 32, 32);
    // Shading top:
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    ctx.rotate(Math.PI/-4);
    ctx.transform(1, 0.333, 0.333, 1, -1, -0.5);
    ctx.fillStyle = "rgba(255, 255, 255, 0.15)";
    ctx.fillRect(-17, 17, 35, 35);
}

} mc_face(username); </script> </html>