Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript the code just doesn't want to run please help

eyezack0

New Coder
JavaScript:
/**
* Title: Using logic
* Author:
* Date:
* Version: 1
* Purpose: Learn how to use logic to color the screen
**/

console.log("Logic activity")

// Some constants that will be used in this scripts
// Task 2: uncomment the DOTSIZE
const WIDTH = 600;
const HEIGHT = 600;
const DOTSIZE = 6;

// some variables that will be needed
var ctx

// Set up the canvas... You've done it before
window.onload=startCanvas

function startCanvas(){
    ctx=document.getElementById("myCanvas").getContext("2d")
  

    ctx.fillStyle = "red"
    ctx.fillRect(0,0,WIDTH,HEIGHT)
    // black background
    ctx.fillStyle = "black"
    ctx.fillRect(10,10,WIDTH-20,HEIGHT -20)

    var ctx
    ctx=document.getElementById("myCanvas").getContext("2d")
    console.log(ctx.font)
}
//it says that this isn't deined why it is so confuced help
window.addEventListener('mousemove', mouseMoved)   
function mouseMovedFunction(mouseEvent){
// Uncomment the next five lines, fix line 47. Check out the log as you move the mouse:
    var mouseX
    var mouseY
    mouseX = mouseEvent.offsetX; // the offsetX property is the x position on the canvas
    mouseY = mouseEvent.offsetY; // the offsetY property is the y position on the canvas
    console.log("mouseX, mouseY",mouseX, mouseY)
  
    // Draw different coloured dots when the mouse is moved. Fix them up one at a time...
    // The x value goes along the width of the canvas, the y value goes along the height
    ctx.fillStyle = "red"
    // Use the mouseX and mouseY to draw a dot where the mouse pointer is
    ctx.fillRect(mouseX, mouseY, 100, 1)
/*
*  Here is where all the logic will go.
*  There is a good description of how to use logic at JavaScript if else else if
*/

// Task 3: If the mouse is in the top half of the canvas the color should change to blue
// Fix the conditional so that the colour changes to blue half way down the canvas
if ( mouseY > 1000 ) {
    color = "blue"
}

// Task 4:
// If the mouse is in the top right of the canvas the color should change to Yellow
// If the mouse is in the bottom right of the canvas the color should change to Green
// See the image in the doc.
// There are many ways to do this. If statements inside if statements may be helpful
if ( false ) { // Add your own condition
    if ( false ){ // Add your own condition
        color = "yellow" // Change color
    }else{
        // Change color
    }
}

// Task 5:
// If the mouse is in the middle 200 pixels the color should change to purple
// See the image in the doc
// There are many ways to do this, Experiment until you get it. Talk to your friends for ideas is you're stuck

/*
*  Here is where all the logic finishes
*/
    // Set the fill to the right color
    ctx.fillStyle = color;
    // Task 2: Draw a red square at the mouse pointer. Use the constant DOTSIZE instead of a literal value
    ctx.fillRect(mouseX, mouseY, DOTSIZE, DOTSIZE)

    // This is a debug statement. It might be useful later...
    console.log("mouseX, mouseY", mouseX, mouseY, " Color",color)
}
 
Last edited by a moderator:
JavaScript:
/**
// some variables that will be needed
var ctx

// Set up the canvas... You've done it before
window.onload=startCanvas

function startCanvas(){
    ctx=document.getElementById("myCanvas").getContext("2d")
    ctx.fillStyle = "red"
    ctx.fillRect(0,0,WIDTH,HEIGHT)
    // black background
    ctx.fillStyle = "black"
    ctx.fillRect(10,10,WIDTH-20,HEIGHT -20)

    var ctx
    ctx=document.getElementById("myCanvas").getContext("2d")
    console.log(ctx.font)
}
Why are you declaring a local variable ctx inside your startCanvas() function, and then giving it the same value that you had just assigned to the global variable ctx ? Not saying that this is your problem, it's probably harmless, but surely it's bad coding (or maybe just a cut and paste error).
 
Where does this code come from?

And did you make a canvas in the <body>?
I did and got a red canvas with a black square. I don't know what this JS code does and don't want to figure it out, but it seems to work for me.
 
Last edited:
JavaScript:
//it says that this isn't deined why it is so confuced help
window.addEventListener('mousemove', mouseMoved)   
function mouseMovedFunction(mouseEvent){
If you care to have a good hard look at your code (something all beginning programmers need to learn!) you see that you set up an event listener with the function mouseMoved, then name the function mouseMovedFunction. It's not surprising you get a "not defined" error, or is it ? And the error message is clear enough and nothing to get confused about.
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom